DatetimePicker 时间选择

引入

通过以下方式来全局注册组件，更多注册方式请参考。

选择年月日

DatetimePicker 通过 type 属性来定义需要选择的时间类型，type 为 表示选择年月日。通过 min-date 和 max-date 属性可以确定可选的时间范围。

  1. <van-datetime-picker
  2.   v-model="currentDate"
  3.   type="date"
  4.   title="选择年月日"
  5.   :min-date="minDate"
  6.   :max-date="maxDate"
  7. />
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const currentDate = ref(new Date(2021, 0, 17));
  6.     return {
  7.       minDate: new Date(2020, 0, 1),
  8.       maxDate: new Date(2025, 10, 1),
  9.       currentDate,
  10.     };
  11.   },
  12. };

选择年月

将 type 设置为 year-month 即可选择年份和月份。通过传入 formatter 函数，可以对选项文字进行格式化处理。

  1. <van-datetime-picker
  2.   v-model="currentDate"
  3.   type="year-month"
  4.   title="选择年月"
  5.   :min-date="minDate"
  6.   :max-date="maxDate"
  7.   :formatter="formatter"
  8. />
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const currentDate = ref(new Date());
  7.     const formatter = (type, val) => {
  8.       if (type === 'year') {
  9.       }
  10.       if (type === 'month') {
  11.         return `${val}月`;
  12.       }
  13.       return val;
  14.     };
  16.     return {
  17.       minDate: new Date(2020, 0, 1),
  18.       maxDate: new Date(2025, 10, 1),
  19.       formatter,
  20.       currentDate,
  21.     };
  22.   },
  23. };

选择月日

将 type 设置为 month-day 即可选择月份和日期。

  1. <van-datetime-picker
  2.   v-model="currentDate"
  3.   type="month-day"
  4.   title="选择月日"
  5.   :min-date="minDate"
  6.   :max-date="maxDate"
  7.   :formatter="formatter"
  8. />

选择时间

将 type 设置为 time 即可选择时间（小时和分钟）。

  1. <van-datetime-picker
  2.   v-model="currentTime"
  3.   type="time"
  5.   :min-hour="10"
  6.   :max-hour="20"
  7. />
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const currentTime = ref('12:00');
  6.     return { currentTime };
  7.   },
  8. };

选择完整时间

将 type 设置为 datetime 即可选择完整时间，包括年月日和小时、分钟。

  1. <van-datetime-picker
  2.   v-model="currentDate"
  3.   type="datetime"
  4.   title="选择完整时间"
  5.   :min-date="minDate"
  6.   :max-date="maxDate"
  7. />
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const currentDate = ref(new Date());
  6.     return {
  7.       minDate: new Date(2020, 0, 1),
  8.       maxDate: new Date(2025, 10, 1),
  9.       currentDate,
  10.     };
  11.   },
  12. };

将 type 设置为 datehour 即可选择日期和小时，包括年月日和小时。

  1. <van-datetime-picker
  2.   v-model="currentDate"
  3.   type="datehour"
  4.   :min-date="minDate"
  5.   :max-date="maxDate"
  6. />

选项过滤器

  1. <van-datetime-picker v-model="currentTime" type="time" :filter="filter" />
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const currentTime = ref('12:00');
  7.     const filter = (type, options) => {
  8.       if (type === 'minute') {
  9.         return options.filter((option) => Number(option) % 5 === 0);
  10.       }
  11.       return options;
  12.     };
  14.     return {
  15.       filter,
  16.       currentTime,
  17.     };
  18.   },
  19. };

自定义列排序

  1. <van-datetime-picker
  2.   v-model="currentDate"
  3.   type="date"
  4.   title="自定义列排序"
  5.   :columns-order="['month', 'day', 'year']"
  6.   :formatter="formatter"
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const currentDate = ref(new Date());
  7.     const formatter = (type, val) => {
  8.       if (type === 'year') {
  9.         return val + '年';
  10.       }
  11.       if (type === 'month') {
  12.         return val + '月';
  13.       }
  14.       if (type === 'day') {
  15.         return val + '日';
  16.       }
  17.       return val;
  18.     };
  20.     return {
  21.       formatter,
  22.       currentDate,
  23.     };
  24.   },
  25. };

Props

DatePicker Props

当时间选择器类型为 date 或 datetime 时，支持以下 props:

参数说明类型默认值
min-date可选的最小时间，精确到分钟Date十年前
max-date可选的最大时间，精确到分钟Date十年后

TimePicker Props

当时间选择器类型为 time 时，支持以下 props:

Events

事件名说明回调参数
change当值变化时触发的事件value: 当前选中的时间
confirm点击完成按钮时触发的事件value: 当前选中的时间
cancel点击取消按钮时触发的事件-

方法

通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见组件实例方法。

方法名说明参数返回值
getPicker获取 Picker 实例，用于调用 Picker 的--

类型定义

组件导出以下类型定义：

  1. import type {
  2.   DatetimePickerType,
  3.   DatetimePickerProps,
  4.   DatetimePickerInstance,
  5. } from 'vant';

DatetimePickerInstance 是组件实例的类型，用法如下：

设置 min-date 或 max-date 后出现页面卡死的情况？

请注意不要在模板中直接使用类似min-date="new Date()"的写法，这样会导致每次渲染组件时传入一个新的 Date 对象，而传入新的数据会触发下一次渲染，从而陷入死循环。

正确的做法是将min-date作为一个数据定义在data函数中。

在 iOS 系统上初始化组件失败？

对此问题的详细解释：stackoverflow。

在桌面端无法操作组件？

参见桌面端适配。

是否有年份或月份选择器？

如果仅需要选择年份或者月份，建议直接使用 Picker 选择器 组件。

你也可以升级到 Vant 4，并使用 组件。

Vant 3 中的 DatetimePicker 组件不支持选择秒。

请升级到 Vant 4，并使用 组件。