vant-weapp datetime-picker 只选择年份

微信小程序中,使用了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())));
}
注意这3if都要在前面新增 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 什么的都加上比较好

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值