欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序日期选择器

程序员文章站 2022-07-01 20:30:28
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 this... ......

微信小程序日期选择器

 

 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"
}