Vant 组件库 - 如何使用 DatetimePicker 选择日期

在 Vant 组件库中，可以使用'DatetimePicker'组件来选择日期。下面是一个简单的例子：

<template>
  <van-datetime-picker
    v-model='currentDate'
    type='date'
    :min-date='minDate'
    :max-date='maxDate'
    :formatter='formatter'
    @confirm='onConfirm'
  />
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      minDate: new Date(2000, 0, 1), // 最小可选日期
      maxDate: new Date(2022, 11, 31), // 最大可选日期
    };
  },
  methods: {
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      }
      if (type === 'month') {
        return `${value}月`;
      }
      return value;
    },
    onConfirm(value) {
      console.log('选择的日期：', value);
    },
  },
};
</script>

在上面的例子中，我们使用了'van-datetime-picker'组件来选择日期，通过'v-model'指令来绑定选择的日期值，'type'属性指定选择日期的类型为'date'，'min-date'和'max-date'属性分别指定可选日期的最小和最大值。

可以通过'formatter'属性自定义选择器的文本格式，这里我们将年份和月份进行了格式化。

'confirm'事件会在用户点击确定按钮时触发，可以在该事件中处理选择的日期值。

请注意，以上示例代码仅适用于 Vue.js 项目中使用 Vant 组件库。