微信小程序中,使用了vant 组件,在datetime-picker中,没有年份选择器,对源码进行修改,以支持
查找 `year-month`
在
if (data.type === 'year-month')
result.splice(2, 3);
下方,增加
if (data.type === 'year')
result.splice(1, 4);
在
if (data.type === 'year-month') {
date = 1;
}
下方,增加
if (data.type === 'year') {
month = 1;
date = 1;
}
还有,再往上几行
把
const month = getTrueValue(values[1]);
改为
let month = getTrueValue(values[1]);
因为我们要修改 month 变量
最后,难度较大的
在第280行左右,有这样的代码
values = [
formatter('year', `${date.getFullYear()}`),
formatter('month', padZero(date.getMonth() + 1)),
];
if (type === 'date') {
values.push(formatter('day', padZero(date.getDate())));
}
if (type === 'datetime') {
values.push(formatter('day', padZero(date.getDate())), formatter('hour', padZero(date.getHours())), formatter('minute', padZero(date.getMinutes())));
}
稍加分析可以知道,values 默认为 year-month 类型,然后依次判断,往里面加入新的
所以,我们要修改为默认 year 类型,然后判断分支加入 year-month 的判断
values = [
formatter('year', `${date.getFullYear()}`),
];
if (type === 'year-month') {
values.push(formatter('month', padZero(date.getMonth() + 1)));
}
if (type === 'date') {
values.push(formatter('month', padZero(date.getMonth() + 1)), formatter('day', padZero(date.getDate())));
}
if (type === 'datetime') {
values.push(formatter('month', padZero(date.getMonth() + 1)), formatter('day', padZero(date.getDate())), formatter('hour', padZero(date.getHours())), formatter('minute', padZero(date.getMinutes())));
}
注意这3个if都要在前面新增 formatter('month', padZero(date.getMonth() + 1))
搞定了~
wxml 里面使用
<van-datetime-picker
type="year"
value="{{ yearcurrentDate }}"
min-date="{{ minDate }}"
max-date="{{ maxDate }}"
formatter="{{ yearformatter }}"
bind:confirm="yearclose"
bind:cancel="yearcancel"
title="选择年份"
/>
注意,此修改比较少,可能会忽略一些边界,所以建议大家把min-date, max-date 什么的都加上比较好