微信小程序的日期选择器的实例详解

微信小程序的日期选择器的实例详解

前言：

关于微信小程序中的日期选择器大家用过都会发现有个很大的问题，就是在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>

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！