vant DatetimePicker 时间选择年份

本文主要是介绍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;
      },
}

这篇关于vant DatetimePicker 时间选择年份的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！