?

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

?

?

轉載于:https://www.cnblogs.com/QGqiezi/p/9328265.html

總結

以上是生活随笔為你收集整理的微信小程序日期选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。