在 Vant4 中使用日期选择器(DatePicker)也是相对简单的。首先,确保你已经安装了 Vant4:
npm install vant@next

然后,你可以在你的 Vue 组件中引入 DatePicker:
<template>
  <div>
    <van-datetime-picker
      v-model="selectedDate"
      type="date"
      title="选择日期"
      :min-date="minDate"
      :max-date="maxDate"
    />
  </div>
</template>

<script>
import { ref } from 'vue';
import { DatetimePicker } from 'vant';
import 'vant/lib/index.css'; // 引入样式

export default {
  components: {
    [DatetimePicker.name]: DatetimePicker,
  },
  setup() {
    const selectedDate = ref(new Date());
    const minDate = ref(new Date(2000, 0, 1)); // 设置最小日期
    const maxDate = ref(new Date(2030, 11, 31)); // 设置最大日期

    return {
      selectedDate,
      minDate,
      maxDate,
    };
  },
};
</script>

在上面的例子中,我们使用了 van-datetime-picker 组件,并通过 v-model 指令将选中的日期与一个 Vue 变量 selectedDate 进行双向绑定。你可以通过修改 type 属性来设置选择器的类型,这里设置为 "date" 表示只选择日期。

同时,我们使用了 title 属性来设置选择器的标题,使用 min-date 和 max-date 属性来限制可选的最小和最大日期。

最后,别忘了引入样式文件,这样样式才能正确应用。


转载请注明出处:http://www.zyzy.cn/article/detail/5803/Vant