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.pingtaimeng.com/article/detail/5803/Vant