vant 2 DatetimePicker怎么设置只选择年

Vant UI的DateTimePicker组件默认允许用户选择日期和时间。如果你想要限制选择仅限于年份，可以自定义其配置。在Vant 2.x版本中，DatetimPicker并没有直接提供只显示年份的选择模式，但你可以通过一些间接的方式来达到这个效果。

一种方法是先创建一个日期选择器，然后在用户选择日期后手动过滤掉小时、分钟和秒。例如，你可以使用JavaScript的`Date`对象截取年份部分：

import Vant from 'vant';

// 使用Vant DateTimePicker组件
const { DateTimePicker } = Vant;

Vue.component('v-date-time-picker', {
  props: {
    format: String,
  },
  data() {
    return {
      selectedDate: null,
    };
  },
  methods: {
    pickYear(date) {
      if (date) {
        const yearOnly = new Date(date).getFullYear();
        this.selectedDate = `${yearOnly}-${0}-${0}`;
      }
    },
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          // 当值变化时，触发pickYear方法
          this.pickYear(newVal);
        }
      },
      immediate: true, // 初始值也立即触发处理函数
    },
  },
  render(h) {
    return (
      <DateTimePicker
        v-model="value"
        placeholder="选择日期"
        :format="format"
        @input="pickYear" // 指定事件监听器
      />
    );
  },
});

// 使用时，只显示年份的日期选择器
<template>
  <v-date-time-picker :format="YYYY-MM-DD" />
</template>

这样，当用户点击日期选择器时，只会显示并允许选择年份。然而，由于这不是原生的日期时间选择器功能，可能会有一些局限性，比如没有完整的日历视图，用户只能输入四位数的年份等。