Home > WeChat Applet > Mini Program Development > How to develop a date picker for a WeChat applet

How to develop a date picker for a WeChat applet

一个新手
Release: 2017-10-07 11:39:04
Original
2969 people have browsed it

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
})
}
})
Copy after login

------- ------------------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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template