主要代码实现
微信官方文档——picker-view
的使用
先了解如何使用picker-view才能自己上手实现日期组件
获取当前月份天数
以上代码可以在控制台输出2020年2月份的天数
Date对象月份从0开始,即0表示1月份,以此类推。
在上面的代码中,我们初始化d为三月份的第0天
,由于JavaScript中day的范围为1~31中的值,所以当设为0时,会向前 一天,也即表示上个月的最后一天
。
new Date(2020,2,0).getDate() //2020 年 2 月份 天数
封装一个获取 指定年月 天数 的函数
function getDays(year, month) {
var d = new Date(year, month, 0)
return d.getDate()
}
因为日期选择组件时间截至到当前,因此需要月份随着年份变化,天数随着月份变化
//获取当前时间
const now = new Date()
//处理日期格式 如果月份或者天数小于10 则变为 01,02,03...一次类推
function process(value) { // <10 加0
return value < 10 ? '0' + value : value
}
// 获取 年份数组 固定的数组,在日期组件中并不需要改变 因为到当前时间年份都是固定的
let years = []
for (let year = 1990; year <= now.getFullYear(); year++) {
years.push(year)
}
//默认的月份 1-12
let defaultMonths=[]
for (let index = 1; index <=12; index++) {
defaultMonths.push(process(index))
}
//默认的天数 1-31
let defaultDays=[]
for (let index = 1; index <=31; index++) {
defaultDays.push(process(index))
}
/*
设置 默认月份 默认天数 的原因是因为 显示当前选择日期 是按照
{{years[value[0]]}}-{{months[value[1]]}}-{{days[value[2]]}} 的格式
value 代表
bindchange 事件 滚动选择时触发change事件,event.detail = {value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)
而 月份 天数 数组 会根据选择的不同而变化
因此需要默认的最大的 月份 天数 数组 作为基准
如果不这样,会出现bug 可以自行测试
*/
// 当前月份数组 需要根据 年份 判断 因为当前时间可以是1-12中任意一个月份
function getCurrentYearMonth(year) { //获取当年 月份数 如果是今年 截止到当前日期
let months = []
let month = year == now.getFullYear() ? now.getMonth() + 1 : 12
for (let i = 1; i <= month; i++) {
months.push(process(i))
}
return months
}
let months = getCurrentYearMonth(now.getFullYear())
// 日 需要根据 月份 判断
function getCurrentMonthDay(year, month) { //获取当前月份天数
let d = new Date(year, month, 0);
let monthDay = d.getDate()
let days = []
d.getFullYear() == now.getFullYear() && d.getMonth() == now.getMonth() ? monthDay = now.getDate() : '' // 当前天数截至到当天
for (let day = 1; day <= monthDay; day++) {
days.push(process(day))
}
return days
}
let days = getCurrentMonthDay(now.getFullYear(), now.getMonth() + 1)
初始值value的设置
value
数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。
picker-view 的 value 值设置 如果通过this.setData()
在onLoad
或者onShow
中设置,会出现问题,因此需要在页面初始数据data
中直接设置
Page({
data:{
//按日选择
value: [years.length - 1, months.length - 1],
//按月选择
startValue: [years.length - 1, months.length - 1, days.length - 1],
endValue: [years.length - 1, months.length - 1, days.length - 1]
}
})