Vant DatetimePicker 时间选择
器,日期、年月、时分等维度,通常与 组件配合使用
import Vue from 'vue'; import { DatetimePicker } from 'vant'; Vue.use(DatetimePicker);
<van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" />
export default { data() { return { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), currentDate: new Date() }; } };
<van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" />
export default { data() { return { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), currentDate: new Date() }; } };
通过传入formatter,可以对选项进行格式化处理
<van-datetime-picker v-model="currentDate" type="year-month" :min-date="minDate" :max-date="maxDate" :formatter="formatter" />
export default { data() { return { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), currentDate: new Date() }; }, methods: { formatter(type, val) { if (type === 'year') { return `${val}年`; } else if (type === 'month') { return `${val}月` } return val; } } }
<van-datetime-picker v-model="currentTime" type="time" :min-hour="10" :max-hour="20" />
export default { data() { return { currentTime: '12:00' }; } };
通过传入filter,可以对选项数组进行过滤,实现时间间隔
<van-datetime-picker v-model="currentTime" type="time" :filter="filter" />
export default { data() { return { currentTime: '12:00' }; }, methods: { filter(type, options) { if (type === 'minute') { return options.filter(option => option % 5 === 0); } return options; } } };
API
当器类型为 date 或 datetime 时,以下 props
当器类型为 time 时,以下 props
通过 ref 可以到 DatetimePicker 实例并实例,详见
常见问题
请注意不要在模板中直接使用类似min-date="new Date()"的写法,这样会导致每次渲染组件时传入新的 Date 对象,而传入新的数据会触发下一次渲染,从而陷入死循环。
正确的做法是将min-date作为数据定义在data中。
如果你遇到了在 iOS 上无法渲染组件的问题,请确认在创建 Date 对象时没有使用new Date('2020-01-01')这样的写法,iOS 以中划线分隔的日期格式,正确写法是new Date('2020/01/01')。
对此问题的详细解释:。
参见。
如果仅需要选择年份或者月份,建议直接使用 组件。