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

发布时间：2020-12-14 20:12:20 所属栏目：资源来源：网络整理

导读：微信小程序的日期选择器的实例详解前言：关于微信小程序中的日期选择器大家用过都会发现有个很大的问题，就是在2月的时候会有31天，没有进行对闰年的判断等各种情况。看了官方文档提供的源码后进行了一些修改，测试修复了上面所说的bug！下面源码：与官

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

前言：

关于微信小程序中的日期选择器大家用过都会发现有个很大的问题，就是在2月的时候会有31天，没有进行对闰年的判断等各种情况。看了官方文档提供的源码后进行了一些修改，测试修复了上面所说的bug！

下面源码：

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

})

}

})

与官方文档是一样的！

{{year}}年{{month}}月{{day}}日

<picker-view
indicator-style="height:50px;"
style='width:100%;height:300px;text-align:center'
value="{{value}}"
bindchange="bindChange">

{{item}}年

{{item}}月

{{item}}日

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!