vant DatetimePicker 时间选择年份

由于vant组件自带没有只选择年的方法 所以需要我们自己写这个方法，网上大多数的方法都是通过改node_modules下的组件文件，这个方法不是很友好，下面的方法是我在网上找到一篇可以使用的方法，下附原文地址，原文包括了（年选、月选、周选、日选）方法，这里只用到了年选，因为原文写的年选方法有一点小问题，所以进行了微调改动

原文参考地址：(15条消息) vant 日期选择器（年选、月选、周选、日选）_长夜将尽 来日可期的博客-CSDN博客_vant 日期选择器

本文代码

要点：Field 输入框+ActionSheet 动作面板+DatetimePicker 时间选择 组合使用

我这里的需求是进入页面后默认最新时间所以加上了setTime()里面的方法 如果没有这个需求可以删除setTime()方法

<van-field
v-model="queryParams.taskYear"
is-link
readonly
arrow-direction="down"
label="年份"
placeholder="请选择年份"
@click="dateSelect"
/>
<van-action-sheet v-model="yearShow">
<van-picker
title="请选择年份"
show-toolbar
:columns="yearColumns"
:default-index="yearSelect"
@confirm="yearConfirm"
@cancel="cancel"
/>
</van-action-sheet>

export default {
data() {
return {
// 查询参数
queryParams: {
taskYear: null,
},
yearSelect: null,
yearColumns: [],
yearShow:false // 年份
}
}

created() {
this.setTime();
this.yearData();
},

methods: {
formatDates(date) {
return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
},
// 进入页面后默认最新时间
setTime(){
var nowTime = new Date();
let year = nowTime.getFullYear();
let month = nowTime.getMonth();
let day = nowTime.getDate();
var taskYear = '';
taskYear = this.formatDates( new Date(year, month ,day));
this.queryParams.taskYear = taskYear.slice(0,4);
}
// 监听年份打开
dateSelect() {
this.yearShow = true;
},
//年选择器
yearConfirm(value) {
this.queryParams.taskYear = value.toString();
this.yearShow = false;
},
//年数据
yearData() {
// 获取默认显示的时间
var nowTime = new Date(this.queryParams.taskYear);
let year = nowTime.getFullYear();
let month = nowTime.getMonth();
let day = nowTime.getDate();
// 循环数组 填写最小时间和最大时间范围 推进数组
for (let i = 2000; i < 2099; i++) {
this.yearColumns.push(i);
}
// 格式化时间并截取
var years = this.formatDates( new Date(year, month ,day));
var Year = years.slice(0,4);
// 将截取的年份赋值给绑定值 用于点击弹出日期窗口后显示当前的时间
this.yearSelect = this.yearColumns.indexOf(Number(Year));
},
// 点击取消按钮时触发的事件
cancel() {
this.yearShow = false;
},
}