WeChat 애플릿용 날짜 선택기를 개발하는 방법

WeChat 애플릿의 날짜 선택기를 사용하는 모든 사람은 큰 문제를 발견하게 됩니다.

즉, 2월은 31일이 있고 윤년 및 기타 상황에 대한 판단이 없습니다.

공식 문서에서 제공하는 소스 코드를 읽은 후, 위에서 언급한 버그를 수정하기 위해 일부 수정하고 테스트했습니다!

아래 소스코드:

------------나는 구분선--------- - ------------

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

------------나는 구분선-- -----------------

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

위 내용은 WeChat 애플릿용 날짜 선택기를 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!