实现vant组件库van-datetime-picker只展示年份选项

最近在做移动端项目时有一个只需要年份的时间选择的需求,但是vant的组件库是无法支持这一点的,通过对其源码的修改从而实现这一需求。
1.需求:选择年份控件

2.van-datetime-picker组件源码在项目中的路径:
node_modules=>vant=>es=>datetime-picker=>DatePicker.js

3.在DatePicker.js文件中有一个ranges函数,插入以下代码

case 'year':
      result = result.slice(0, 1);
      break

在这里插入图片描述
在updateInnerValue函数中插入下面的代码:

month = type === 'year' ? 1 : getValue('month');

在这里插入图片描述

为了避免返回的时间每次都是1970年,我们需要在formatValue函数中插入以下代码:

if (this.type != 'year') {
  value = Math.max(value, minDate.getTime());
  value = Math.min(value, maxDate.getTime());
}

在这里插入图片描述
4.使用:

// type 需要传入year
<van-datetime-picker
  v-model="currentYear"
  type="year"  
  title="选择年份"
  @confirm="confirmYear"
/> 

5.总结:以上只是为了实现产品需求的一种实现方式,由于是修改相关源码,所以在多人合作的项目中体验和代码接受程度上可能并不是特别友好。本人相对来说还是推荐另一种方式:

/*
  在已知开始年份和结束年份的情况下,建议使用遍历年份结合van-picker组件,
  yearColumns为遍历开始年份和结束年份中间差值所得
*/
<van-picker
  title="选择年份"
  show-toolbar
  :columns="yearColumns"
  @confirm="confirmYear"
/>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值