使用 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;
        }
    }
};

最后

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