功能介绍
1.点击按钮弹出日期选择
2.点击日期选择之外的空白部分关闭选择
3.预约近一周日期
4.超出当前时间的时间点不可选(若当前时间为10:xx,则10点之前的不可选)
效果图
index.js
Page({
data: {
//日期数组
timeList: [],
//时间数组
hourList: [
{
hour: "8:00",
n: 8,
isShow: true
},
{
hour: "9:00",
n: 9,
isShow: true
}, {
hour: "10:00",
n: 10,
isShow: true
}, {
hour: "12:00",
n: 11,
isShow: true
}, {
hour: "13:00",
n: 13,
isShow: true
}, {
hour: "14:00",
n: 14,
isShow: true
}, {
hour: "15:00",
n: 15,
isShow: true
}, {
hour: "16:00",
n: 16,
isShow: true
}, {
hour: "17:00",
n: 17,
isShow: true
}, {
hour: "18:00",
n: 18,
isShow: true
}, {
hour: "19:00",
n: 19,
isShow: true
}],
//是否显示
timeShow: false,
currentTab: 0,
//选择时间
chooseHour: "",
// 选择日期
chooseTime: "",
hourIndex: -1
},
//弹出按钮
showTimeModel: function () {
this.setData({
timeShow: !this.data.timeShow,
chooseTime: this.data.timeList[0].date,
});
},
//点击外部取消
modelCancel: function () {
this.setData({
timeShow: !this.data.timeShow,
chooseTime: this.data.timeList[0].date,
});
},
//日期选择
timeClick: function (e) {
//非今天-过时不判断
if (e.currentTarget.dataset.index != 0) {
var list = this.data.hourList;
for (var i = 0; i < list.length; i++) {
list[i].isShow = true;
}
this.setData({
hourList: list
})
} else {
//过时不可预约
var hour = new Date().getHours();
for (var i = 0; i < this.data.hourList.length; i++) {
var list = this.data.hourList;
if (this.data.hourList[i].n <= hour) {
list[i].isShow = false;
this.setData({
hourList: list
})
}
}
}
this.setData({
currentTab: e.currentTarget.dataset.index,
chooseTime: this.data.timeList[e.currentTarget.dataset.index].date,
chooseHour: "",
hourIndex: -1
});
console.log(this.data.chooseTime)
},
// 时间选择
hourClick: function (e) {
var that = this;
// 时间不可选择
if (!e.currentTarget.dataset.isshow) {
return false;
}
this.setData({
hourIndex: e.currentTarget.dataset.index,
chooseHour: this.data.hourList[e.currentTarget.dataset.index].hour
});
var chooseTime = new Date().getFullYear() + "-" + this.data.chooseTime + " " + this.data.chooseHour
console.log(chooseTime)
},
/** 生命周期函数--监听页面加载*/
onLoad: function (options) {
Date.prototype.Format = function (format) {
var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
}
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
}
Date.prototype.DateAdd = function (interval, number) {
number = parseInt(number);
var date = new Date(this.getTime());
//
switch (interval) {
case "y": date.setFullYear(this.getFullYear() + number); break;
case "m": date.setMonth(this.getMonth() + number); break;
case "d": date.setDate(this.getDate() + number); break;
case "w": date.setDate(this.getDate() + 7 * number); break;
case "h": date.setHours(this.getHours() + number); break;
case "n": date.setMinutes(this.getMinutes() + number); break;
case "s": date.setSeconds(this.getSeconds() + number); break;
case "l": date.setMilliseconds(this.getMilliseconds() + number); break;
}
return date;
}
var dateList = [];
//7天
var now = new Date();
var day = now.getDay();
//
for (var i = 0; i < 7; i++) {
var d = {};
if (i == 0) { var w = "今天" }
if (i == 1) { var w = "明天" }
if (i == 2) { var w = "后天" }
if (i == 3) {
if (day == 1) { var w = "周四" }
if (day == 2) { var w = "周五" }
if (day == 3) { var w = "周六" }
if (day == 4) { var w = "周日" }
if (day == 5) { var w = "周一" }
if (day == 6) { var w = "周二" }
if (day == 7) { var w = "周三" }
}
if (i == 4) {
if (day == 1) { var w = "周五" }
if (day == 2) { var w = "周六" }
if (day == 3) { var w = "周日" }
if (day == 4) { var w = "周一" }
if (day == 5) { var w = "周二" }
if (day == 6) { var w = "周三" }
if (day == 7) { var w = "周四" }
}
if (i == 5) {
if (day == 1) { var w = "周六" }
if (day == 2) { var w = "周日" }
if (day == 3) { var w = "周一" }
if (day == 4) { var w = "周二" }
if (day == 5) { var w = "周三" }
if (day == 6) { var w = "周四" }
if (day == 7) { var w = "周五" }
}
if (i == 6) {
if (day == 1) { var w = "周日" }
if (day == 2) { var w = "周一" }
if (day == 3) { var w = "周二" }
if (day == 4) { var w = "周三" }
if (day == 5) { var w = "周四" }
if (day == 6) { var w = "周五" }
if (day == 7) { var w = "周六" }
}
d.name = w;
d.date = new Date().DateAdd('d', i).Format("MM-dd");
dateList.push(d)
}
this.setData({
timeList: dateList
});
//初始化判断
//当前时间
var hour = new Date().getHours();
for (var i = 0; i < this.data.hourList.length; i++) {
var list = this.data.hourList;
//过时不可选
if (this.data.hourList[i].n <= hour) {
list[i].isShow = false;
this.setData({
hourList: list
})
}
}
}
})