您好,登錄后才能下訂單哦!
微信小程序的日期選擇器的實(shí)例詳解
前言:
關(guān)于微信小程序中的日期選擇器大家用過都會(huì)發(fā)現(xiàn)有個(gè)很大的問題,就是在2月的時(shí)候會(huì)有31天,沒有進(jìn)行對(duì)閏年的判斷等各種情況??戳斯俜轿臋n提供的源碼后進(jìn)行了一些修改,測(cè)試修復(fù)了上面所說的bug!
下面源碼:
<!---js---》 const date = new Date();//獲取系統(tǒng)日期 const years = [] const months = [] const days = [] const bigMonth = [1,3,5,7,8,10,12] //將日期分開寫入對(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({ /** * 頁面的初始數(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-view indicator- 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ǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。