小程序时间预约

admin

1. Page({
   
2.     data: {
   
3.         //日期
   
4.         timeList: [],
   
5.         //可预约天数
   
6.         yyDay:30,
   
7.         //预约时间段
   
8.         hourList: [ {hour: "8:00",n: 8,isShow: true},
   
9.                     {hour: "9:00",n: 9,isShow: true},
   
10.                     {hour: "10:00",n: 10,isShow: true},
    
11.                     {hour: "12:00",n: 11,isShow: true},
    
12.                     {hour: "13:00",n: 13,isShow: true},
    
13.                     {hour: "14:00",n: 14,isShow: true},
    
14.                     {hour: "15:00",n: 15,isShow: true},
    
15.                     {hour: "16:00",n: 16,isShow: true},
    
16.                     {hour: "17:00",n: 17,isShow: true},
    
17.                     {hour: "18:00",n: 18,isShow: true},
    
18.                     {hour: "19:00",n: 19,isShow: true}
    
19.         ],
    
20.         //是否显示
    
21.         timeShow: false,
    
22.         currentTab: 0,
    
23.         //选择时间
    
24.         chooseHour: "",
    
25.         //选择日期
    
26.         chooseTime: "",
    
27.         hourIndex: -1
    
28.     },
    
29.     //弹出按钮
    
30.     showTimeModel: function () {
    
31.         this.setData({
    
32.             timeShow: !this.data.timeShow,
    
33.             chooseTime: this.data.timeList[0].date,
    
34.         });
    
35.     },
    
36.     //点击外部取消
    
37.     modelCancel: function () {
    
38.         this.setData({
    
39.             timeShow: !this.data.timeShow,
    
40.             chooseTime: this.data.timeList[0].date,
    
41.         });
    
42.     },
    
43.     //日期选择
    
44.     timeClick: function (e) {
    
45.         //非今天-不判断超过当前时间点(所有时间点都可选择)
    
46.         if (e.currentTarget.dataset.index != 0) {
    
47.             var list = this.data.hourList;
    
48.             for (var i = 0; i < list.length; i++) {
    
49.                 list[i].isShow = true;
    
50.             }
    
51.             this.setData({
    
52.                 hourList: list
    
53.             })
    
54.         } else {
    
55.             //今天-过时不可预约
    
56.             var hour = new Date().getHours();
    
57.             for (var i = 0; i < this.data.hourList.length; i++) {
    
58.                 var list = this.data.hourList;
    
59.                 if (this.data.hourList[i].n <= hour) {
    
60.                     list[i].isShow = false;
    
61.                     this.setData({
    
62.                         hourList: list
    
63.                     })
    
64.                 }
    
65.             }
    
66.         }
    
67.         this.setData({
    
68.             currentTab: e.currentTarget.dataset.index,
    
69.             chooseTime: this.data.timeList[e.currentTarget.dataset.index].date,
    
70.             chooseHour: "",
    
71.             hourIndex: -1
    
72.         });
    
73.         console.log(this.data.chooseTime)
    
74.     },
    
75.     // 时间选择
    
76.     hourClick: function (e) {
    
77.         var that = this;
    
78.         // 时间不可选择
    
79.         if (!e.currentTarget.dataset.isshow) {
    
80.             return false;
    
81.         }
    
82.         this.setData({
    
83.             hourIndex: e.currentTarget.dataset.index,
    
84.             chooseHour: this.data.hourList[e.currentTarget.dataset.index].hour
    
85.         });
    
86.         var chooseTime = new Date().getFullYear() + "-" + this.data.chooseTime + " " + this.data.chooseHour
    
87.         console.log(chooseTime)
    
88.     },
    
89.     onLoad: function (options) {
    
90.         Date.prototype.Format = function (format) {
    
91.             var o = {
    
92.                 "M+": this.getMonth() + 1,  //month
    
93.                 "d+": this.getDate(),     //day
    
94.                 "h+": this.getHours(),    //hour
    
95.                 "m+": this.getMinutes(),  //minute
    
96.                 "s+": this.getSeconds(), //second
    
97.                 "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
    
98.                 "S": this.getMilliseconds() //millisecond
    
99.             }
    
100.             if (/(y+)/.test(format)) {
     
101.                 format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
     
102.             }
     
103.             for (var k in o) {
     
104.                 if (new RegExp("(" + k + ")").test(format)) {
     
105.                     format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
     
106.                 }
     
107.             }
     
108.             return format;
     
109.         }
     
110.         Date.prototype.DateAdd = function (interval, number) {
     
111.             number = parseInt(number);
     
112.             var date = new Date(this.getTime());
     
113.             switch (interval) {
     
114.                 case "y": date.setFullYear(this.getFullYear() + number); break;
     
115.                 case "m": date.setMonth(this.getMonth() + number); break;
     
116.                 case "d": date.setDate(this.getDate() + number); break;
     
117.                 case "w": date.setDate(this.getDate() + 7 * number); break;
     
118.                 case "h": date.setHours(this.getHours() + number); break;
     
119.                 case "n": date.setMinutes(this.getMinutes() + number); break;
     
120.                 case "s": date.setSeconds(this.getSeconds() + number); break;
     
121.                 case "l": date.setMilliseconds(this.getMilliseconds() + number); break;
     
122.             }
     
123.             return date;
     
124.         }
     
125.         var dateList = [];
     
126.         var now = new Date();
     
127.         for (var i = 0; i < this.data.yyDay; i++) {
     
128.             var d = {};
     
129.             var day = new Date().DateAdd('d', i).getDay();
     
130.             if (day == 1) { var w = "周一" }
     
131.             if (day == 2) { var w = "周二" }
     
132.             if (day == 3) { var w = "周三" }
     
133.             if (day == 4) { var w = "周四" }
     
134.             if (day == 5) { var w = "周五" }
     
135.             if (day == 6) { var w = "周六" }
     
136.             if (day == 0) { var w = "周日" }
     
137.             d.name = w;
     
138.             d.date = new Date().DateAdd('d', i).Format("MM-dd");
     
139.             dateList.push(d)
     
140.         }
     
141.         this.setData({
     
142.             timeList: dateList
     
143.         });
     
144.         //初始化判断
     
145.         //当前时间
     
146.         var hour = new Date().getHours();
     
147. 
     
148.         for (var i = 0; i < this.data.hourList.length; i++) {
     
149.             var list = this.data.hourList;
     
150.             //过时不可选
     
151.             if (this.data.hourList[i].n <= hour) {
     
152.                 list[i].isShow = false;
     
153.                 this.setData({
     
154.                     hourList: list
     
155.                 })
     
156.             }
     
157.         }
     
158.     },
     
159. })
     

复制代码

demo下载：