微信小程序的日期選擇器的實例詳解

前言：

關于微信小程序中的日期選擇器大家用過都會發現有個很大的問題，就是在2月的時候會有31天，沒有進行對閏年的判斷等各種情況。看了官方文檔提供的源碼后進行了一些修改，測試修復了上面所說的bug！

下面源碼：

<!---js---》const date = new Date();//獲取系統日期const years = []const months = []const days = []const bigMonth = [1,3,5,7,8,10,12]//將日期分開寫入對應數組//年for (let i =1990; i <= date.getFullYear(); i++) {years.push(i);}//月for (let i =1; i <= 12; i++) {months.push(i);}//日for (let i =1; i <= 31; i++) {days.push(i);}Page({/*** 頁面的初始數據*/data: {years: years,year: date.getFullYear(),months: months,month: 2,days: days,day: 2,value: [9999, 1, 1],},showToask: function() {wx.showToast({title: '成功',icon: 'success',duration: 2000})},//判斷元素是否在一個數組contains: function(arr, obj) {var i = arr.length;while(i--) {if (arr[i] === obj) {return true;}}return false;},setDays: function (day) {const temp = [];for(let i =1; i<=day; i++) {temp.push(i)}this.setData({days: temp,})},showLoading: function () {wx.showLoading({title: '加載中...',}),setTimeout(function () {wx.hideLoading()},2000)},//選擇滾動器改變觸發事件bindChange: function (e) {const val = e.detail.value;//判斷月的天數const setYear = this.data.years[val[0]];const setMonth = this.data.months[val[1]];const setDay = this.data.days[val[2]]// console.log(setYear + '年' + setMonth + '月' + setDay + '日');//閏年if (setMonth === 2) {if (setYear % 4 === 0 && setYear % 100 !== 0) {// console.log('閏年')this.setDays(28);} else {// console.log('非閏年')this.setDays(29);}}else {//大月if (this.contains(bigMonth, setMonth)){this.setDays(31)}else {this.setDays(30)}}this.setData({year: setYear,month: setMonth,day: setDay})}})

<!---wxml--->

與官方文檔是一樣的！

<view style='text-align:center;margin-top:30px;'>{{year}}年{{month}}月{{day}}日</view><picker-viewindicator-style="height:50px;"style='width:100%;height:300px;text-align:center'value="{{value}}"bindchange="bindChange"><picker-view-column><view wx:for="{{years}}" wx:key="year" style='line=height:50px;'>{{item}}年</view></picker-view-column><picker-view-column><view wx:for="{{months}}" wx:key="month">{{item}}月</view></picker-view-column><picker-view-column><view wx:for="{{days}}" wx:key="day">{{item}}日</view></picker-view-column></picker-view></view>

如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！