微信小程序日期选择器

2018-07-19 06:14:07来源：博客园阅读 ()

 1 /* JS代码部分 */
 2
 3 const date = new Date()
 4 const years = []
 5 const months = []
 6 const days = []
 7 const hours = []
 8 const minutes = []
 9 var thisMon = date.getMonth();
10 var thisDay = date.getDate();
11 
12 for (let i = 2017; i <= date.getFullYear() + 1; i++) {
13   years.push(i)
14 }
15 
16 for (let i = date.getMonth(); i <= 11; i++) {
17   var k = i;
18   if (0 <= i && i < 9) {
19     k = "0" + (i + 1);
20   } else {
21     k = (i + 1);
22   }
23   months.push(k)
24 }
25 if (0 <= thisMon && thisMon < 9) {
26   thisMon = "0" + (thisMon + 1);
27 } else {
28   thisMon = (thisMon + 1);
29 }
30 if (0 <= thisDay && thisDay < 10) {
31   thisDay = "0" + thisDay;
32 }
33 
34 var totalDay = mGetDate(date.getFullYear(), thisMon);
35 for (let i = 1; i <= 31; i++) {
36   var k = i;
37   if (0 <= i && i < 10) {
38     k = "0" + i
39   }
40   days.push(k)
41 }
42 
43 for (let i = 0; i <= 23; i++) {
44   var k = i;
45   if (0 <= i && i < 10) {
46     k = "0" + i
47   }
48   hours.push(k)
49 }
50 for (let i = 0; i <= 59; i++) {
51   var k = i;
52   if (0 <= i && i < 10) {
53     k = "0" + i
54   }
55   minutes.push(k)
56 }
57 function mGetDate(year, month) {
58   var d = new Date(year, month, 0);
59   return d.getDate();
60 }
61 Page({
62   data: {
63     years: years,
64     year: date.getFullYear(),
65     months: months,
66     month: thisMon,
67     days: days,
68     day: thisDay,
69     value: [1, thisMon - 1, thisDay - 1, 0, 0],
70     hours: hours,
71     hour: "00",
72     minutes: minutes,
73     minute: "00",
74   },
75   bindChange: function (e) {
76     const val = e.detail.value
77     this.setData({
78       year: this.data.years[val[0]],
79       month: this.data.months[val[1]],
80       day: this.data.days[val[2]],
81       hour: this.data.hours[val[3]],
82       minute: this.data.minutes[val[4]],
83     })
84     var totalDay = mGetDate(this.data.year, this.data.month);
85     var changeDate = [];
86     for (let i = 1; i <= totalDay; i++) {
87       var k = i;
88       if (0 <= i && i < 10) {
89         k = "0" + i
90       }
91       changeDate.push(k)
92     }
93     this.setData({
94       days: changeDate
95     })
96   },
97 
98 })

/* css代码部分 */
.time-title{
  float:left;
  width:20%;
  text-align:center;
  color:#45BCE8;
}
.picker-text{
  text-align:center;
}
/*mask*/
.time_screens {
 width: 100%;
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 1000;
 opacity: 0.5;
 overflow: hidden;
}


/* html代码部分 */
  <view class="time_screens">
    <view style="text-align:center;color:#45BCE8">{{year}}-{{month}}-{{day}}
      <label style="float:left;margin-left:30px;">取消</label>
      <label style="float:right;margin-right:30px;">确定</label>
    </view>
    <view style="border-top:1px solid #45BCE8;height:25px;font-size:14px;">
    </view>
    <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
      <picker-view-column class="picker-text">
        <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
      </picker-view-column>
      <picker-view-column class="picker-text">
        <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
      </picker-view-column>
      <picker-view-column class="picker-text">
        <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
      </picker-view-column>

    </picker-view>
  </view>

/* Json */
{
  "navigationBarTitleText": "XXXX"
}