微信小程序的日期選擇器的實(shí)例詳解
更新時(shí)間：2017年09月29日 10:50:39 作者：qq_32486147
這篇文章主要介紹了微信小程序的日期選擇器的實(shí)例詳解的相關(guān)資料,希望通過本能幫助到大家，需要的朋友可以參考下
微信小程序的日期選擇器的實(shí)例詳解
前言：
關(guān)于微信小程序中的日期選擇器大家用過都會發(fā)現(xiàn)有個(gè)很大的問題，就是在2月的時(shí)候會有31天，沒有進(jìn)行對閏年的判斷等各種情況?？戳斯俜轿臋n提供的源碼后進(jìn)行了一些修改，測試修復(fù)了上面所說的bug！
下面源碼：
<!---js---》
const date =
new Date();//獲取系統(tǒng)日期
const years = []
const months = []
const days = []
const bigMonth = [1,3,5,7,8,10,12]
//將日期分開寫入對應(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({
/**
* 頁面的初始數(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)
},
//選擇滾動器改變觸發(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-view
indicator-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>
如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript實(shí)例?ODO?List分析，主要利用JavaScript、css、HTML等實(shí)例代碼展開起內(nèi)容的解析，需要的小伙伴可以參考一下2022-01-01
這篇文章主要介紹了微信小程序 火車票查詢實(shí)例講解的相關(guān)資料,這里提供了簡單實(shí)例來說明微信小程序的框架及如何開發(fā)，需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了Canvaskit快速入門教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了JavaScript?ES新特性塊級作用域，所謂的塊級作用域，就是該變量只能在聲明時(shí)的代碼塊或者子代碼塊中使用，使JavaScript出現(xiàn)了塊級作用域，具體詳細(xì)內(nèi)容請參考下面文章內(nèi)容2021-12-12
這篇文章主要為大家介紹了Three.js材質(zhì)Material類型示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了面試手寫實(shí)現(xiàn)Promise.all過程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
JavaScript中基本類型存儲在堆中還是棧中，百度一下有很多不同的答案，本篇文章就來給大家為此做個(gè)詳細(xì)的介紹,需要的朋友可以參考一下2021-09-09
這篇文章主要介紹了微信小程序 WXML、WXSS 和JS介紹及詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序 地圖（map）實(shí)例詳解的相關(guān)資料,這里對微信小程序的地圖API 進(jìn)行了詳細(xì)介紹并附示例代碼和實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-11-11
js前端實(shí)現(xiàn)word?excel?pdf?ppt?mp4圖片文本等文件預(yù)覽
這篇文章主要為大家介紹了js前端實(shí)現(xiàn)word?excel?pdf?ppt?mp4圖片文本等文件預(yù)覽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07