使用 van-picker 组件模拟 DatetimePicker 组件单独选择年份

前言

现在有这样一个需求，就是当设置选择时间为年的时候，我们要向用户展示单独的年份以供选择。 效果图如下：

Vant 组件库中 DatetimePicker 时间选择组件，支持选择年月日，支持选择年月，但是 不支持单独选择年份.

所以为了实现这个效果，我们使用 picker 组件来实现我们的需求。

template

<van-field
  readonly
  clickable
  label="日期"
  :value="currentDate"
  placeholder="选择日期"
  @click="openPicker"
/>
<van-popup v-model="timePicker" round get-container="body" position="bottom" > <van-picker show-toolbar title="选择时间" :default-index="defaultIndex" :columns="columns" @cancel="timePicker = false" @confirm="confirmDate" /> </van-popup>

script

import moment from 'moment';

const lastYear = moment('2050').year();
const yearsList = [...new Array(151).keys()]
  .map((k) => {
    return `${lastYear - k}年`;
  })
  .reverse();

export default {
    data() {
        return {
          currentDate: '', // 当前展示时间
          timePicker: false,
          columns: yearsList, // 
          defaultIndex: 0
        };
    },
    methods: {
        openPicker() {
          const currentIndex = yearsList.findIndex((item) => {
            return (
              item === (this.currentDate || `${moment().year()}年`)
            );
          });
          this.defaultIndex = currentIndex > -1 ? currentIndex : 0;
          this.timePicker = true;
        },
        // 回调参数: 多列：所有列选中值，所有列选中值对应的索引
        confirmDate(value) {
          this.currentDate = value;
          this.timePicker = false;
        }
    }
};

最后

• 文章是自己手敲，是对工作日常的总结，如有错误之处，敬请指正
• 如果遇到什么问题就留言吧，能解决大家帮忙一起解决一下