So entwickeln Sie eine Datumsauswahl für ein WeChat-Applet

Jeder, der die Datumsauswahl im WeChat-Applet verwendet hat, wird feststellen, dass es ein großes Problem gibt

Es ist manchmal im Februar wird 31 Tage betragen, und es wird keine Beurteilung von Schaltjahren und anderen Situationen erfolgen. Nachdem ich den im offiziellen Dokument

bereitgestellten Quellcode gelesen hatte, nahm ich einige Änderungen vor und testete ihn, um den oben genannten Fehler zu beheben!

Quellcode unten:

---------------------- - Ich bin die Trennlinie------------

<!---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
})
}
})

--- --------------------Ich bin die Trennlinie------

<!---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>

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie eine Datumsauswahl für ein WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!