How to develop a date picker for a WeChat applet

Everyone who has used the date picker in the WeChat applet will find that there is a big problem.

It is in February Sometimes there will be 31 days, and various situations such as leap year judgment are not carried out. After reading the source code provided by

, I made some modifications and tested it to fix the bug mentioned above!

Source code below:

----------------------- I am the dividing line--------------------------

<!---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: &#39;成功&#39;,
icon: &#39;success&#39;,
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: &#39;加载中...&#39;,
}),
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 + &#39;年&#39; + setMonth + &#39;月&#39; + setDay + &#39;日&#39;);
//闰年
if (setMonth === 2) {
if (setYear % 4 === 0 && setYear % 100 !== 0) {
// console.log(&#39;闰年&#39;)
this.setDays(28);
} else {
// console.log(&#39;非闰年&#39;)
this.setDays(29);
}
}else {
//大月
if (this.contains(bigMonth, setMonth)){
this.setDays(31)
}else {
this.setDays(30)
}
}
this.setData({
year: setYear,
month: setMonth,
day: setDay
})
}
})

------- ------------------I am the dividing line--------------------

<!---wxml---> 与官方文档是一样的！
<view style=&#39;text-align:center;margin-top:30px;&#39;>{{year}}年{{month}}月{{day}}日</view>
<picker-viewindicator-style="height:50px;"style=&#39;width:100%;height:300px;text-align:center&#39;value="{{value}}"bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" wx:key="year" style=&#39;line=height:50px;&#39;>
{{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>

The above is the detailed content of How to develop a date picker for a WeChat applet. For more information, please follow other related articles on the PHP Chinese website!