修改微信小程式官方picker-view日期選擇器
專案需求截圖,選擇出生日期的時候需要用到微信的picker-view日期選擇器
然後就發現官方picker-view元件有一些問題:
1、初始化日期不是當前日期
2、選擇不同月份,日期都是從1-31號(其實不同月份 天數不同)
3、專案要求所選日期不能大於當前日期(既不能選擇未來的日期)
在官方程式碼上,根據專案需求做了些修改
wxml部分
<view class="birthBox">
<label>選擇生日</label>
<picker-view wx:if="{{years.length>0 && months.length>0 && days.length>0}}" style="width: 100%; height: 180rpx;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" wx:key="{{index}}">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" wx:key="{{index}}">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" wx:key="{{index}}">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
js實現部分
const date = new Date()
const nowYear = date.getFullYear()
const nowMonth = date.getMonth() + 1
const nowDay = date.getDate()let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
// 根據年月 獲取當月的總天數
let getDays = function(year, month) {
if (month === 2) {
return ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28
} else {
return daysInMonth[month-1]
}
}
// 根據年月日設定當前月有多少天 並更新年月日陣列
let setDate = function (year, month, day, _th){
let daysNum = year === nowYear && month === nowMonth ? nowDay : getDays(year, month)
day = day > daysNum ? 1 : day
let monthsNum = year === nowYear ? nowMonth : 12
let years = []
let months = []
let days = []
let yearIdx = 9999
let monthIdx = 0
let dayIdx = 0// 重新設定年份列表
for (let i = 1950; i <= nowYear; i++) {
years.push(i)
}
years.map((v,idx)=> {
if (v === year){
yearIdx = idx
}
})
// 重新設定月份列表
for (let i = 1; i <= monthsNum; i++) {
months.push(i)
}
months.map((v, idx) => {
if (v === month) {
monthIdx = idx
}
})
// 重新設定日期列表
for (let i = 1; i <= daysNum; i++) {
days.push(i)
}
days.map((v, idx) => {
if (v === day) {
dayIdx = idx
}
})_th.setData({
years: years,//年份列表
months: months,//月份列表
days: days,//日期列表
value: [yearIdx, monthIdx, dayIdx],
year: year,
month: month,
day: day
})
}
Page({/**
* 頁面的初始資料
*/
data: {
years: [],
months: [],
days: [],
year: nowYear,
month: nowMonth,
day: nowDay,
value: [9999, 1, 1]
},/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
setDate(this.data.year, this.data.month, this.data.day, this)
},
bindChange: function (e) {
let val = e.detail.value
setDate(this.data.years[val[0]], this.data.months[val[1]], this.data.days[val[2]], this)
}
})