vant DatetimePicker 时间选择年份

2022-04-15 22:33:14 阅读：306 来源： 互联网

标签：年份 vant 方法 nowTime month let var DatetimePicker taskYear

由于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,方法,nowTime,month,let,var,DatetimePicker,taskYear
来源： https://www.cnblogs.com/wlyj/p/16151270.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vant DatetimePicker 时间选择年份