vant-DatetimePicker 时间选择

介绍

时间选择器，支持日期、年月、时分等维度，通常与

弹出层

组件配合使用。

引入

代码演示

选择年月日

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

选择年月

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

选择月日

将 type 设置为 `month-day` 即可选择月份和日期（从 2.8.4 版本开始支持）。

选择时间

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

选择完整时间

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

选择年月日小时

将 type 设置为 `datehour` 即可选择日期和小时，包括年月日和小时（从 2.9.1 版本开始支持）。

选项过滤器

通过传入 `filter` 函数，可以对选项数组进行过滤，实现自定义时间间隔。

自定义列排序

API

Props

DatePicker Props

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

TimePicker Props

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

Events

Slots

方法

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

组件实例方法

。

常见问题

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

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

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

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

如果你遇到了在 iOS 上无法渲染组件的问题，请确认在创建 Date 对象时没有使用`new Date('2020-01-01')`这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是`new Date('2020/01/01')`。

对此问题的详细解释：

stackoverflow

。

在桌面端无法操作组件？

参见

桌面端适配

。

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

如果仅需要选择年份或者月份，建议直接使用

Picker

组件。