最近在做移动端项目时有一个只需要年份的时间选择的需求,但是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"
/>