怎么開(kāi)發(fā)一個(gè)小程序的日期選擇器

這篇文章給大家分享的是有關(guān)怎么開(kāi)發(fā)一個(gè)小程序的日期選擇器的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

源碼：

-----------------------我是分割線--------------------------

<!---js---》
const date = new Date();//獲取系統(tǒng)日期
const years = []
const months = []
const days = []
const bigMonth = [1,3,5,7,8,10,12]
//將日期分開(kāi)寫(xiě)入對(duì)應(yīng)數(shù)組
//年
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({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
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
})
},
//判斷元素是否在一個(gè)數(shù)組
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)
},
//選擇滾動(dòng)器改變觸發(fā)事件
bindChange: function (e) {
const val = e.detail.value;
//判斷月的天數(shù)
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
})
}
})

-------------------------我是分割線--------------------

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

感謝各位的閱讀！關(guān)于怎么開(kāi)發(fā)一個(gè)小程序的日期選擇器就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！