DateTimePicker 日期时间选择器 ​

在同一个选择器里选择日期和时间

TIP

日期时间选择器来自日期选择器和时间选择器的组合。 关于属性的更详细解释，请参阅日期选择器和时间选择器。

日期和时间点 ​

通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。 快捷方式的使用方法与 Date Picker 相同。

Default
With shortcuts
With default time

日期时间格式 ​

使用format指定输入框的格式。 使用value-format指定绑定值的格式。

默认情况下，组件接受并返回Date对象。

在 这里 查看 Day.js 支持的所有格式。

WARNING

请一定要注意传入参数的大小写是否正确

Emits Date object
Value:
Use value-format
Value：
Timestamp
Value：

下拉列表中的日期和时间格式 ​

使用 date-format 和 time-format 控制下拉列表面板输入框中显示的文本格式

日期和时间范围 ​

设置type为datetimerange即可选择日期和时间范围

Default
With shortcuts

默认的起始与结束时刻 ​

使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。 我们可以使用 default-time 属性来控制它。 default-time接受一个数组，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。 第一项控制开始日期的时间值，第二项控制结束日期的时间值。

Start and end date time 12:00:00
Start date time 12:00:00, end date time 08:00:00

自定义图标 2.8.0 ​

使用插槽自定义图标。

Attributes ​

属性名说明类型可选值默认值
model-value / v-model绑定值，如果它是数组，长度应该是 2Date / number / string / Array——
readonly只读boolean—false
disabled禁用boolean—false
editable文本框可输入boolean—true
clearable是否显示清除按钮boolean—true
size输入框尺寸stringlarge/default/smalldefault
placeholder非范围选择时的占位内容string——
start-placeholder范围选择时开始日期的占位内容string——
end-placeholder范围选择时结束日期的占位内容string——
arrow-control是否使用箭头进行时间选择boolean—false
type显示类型stringyear/month/date/datetime/ week/datetimerange/daterangedate
format显示在输入框中的格式string参见 date formatsYYYY-MM-DD HH:mm:ss
popper-classDateTimePicker 下拉框的类名string——
range-separator选择范围时的分隔符string—'-'
default-value可选，选择器打开时默认显示的时间Date / [Date, Date]—
default-time选择日期后的默认时间值。 如未指定则默认时间值为 00:00:00Date / [Date, Date]——
value-format可选，绑定值的格式。 不指定则绑定值为 Date 对象string查看 日期格式—
date-format 2.4.0可选，时间选择器下拉列表中显示的日期格式string参见 date formats—
time-format 2.4.0可选，时间选择器下拉列表中显示的时间格式string查看 日期格式—
id等价于原生 input id 属性string / [string, string]——
name等价于原生 input name 属性string——
unlink-panels在范围选择器里取消两个日期面板之间的联动boolean—false
prefix-icon自定义前缀图标组件string | Component—Date
clear-icon自定义清除图标string | Component—CircleClose
shortcuts设置快捷选项，需要传入数组对象object[{ text: string, value: date / function }]——
disabled-date一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。function(Date)——
cell-class-name设置自定义类名Function(Date)——
teleported是否将 datetime-picker 的下拉列表插入至 body 元素booleantrue / falsetrue
empty-values 2.7.0组件的空值配置 参考config-providerarray—
value-on-clear 2.7.0清空选项的值 参考 config-providerstring / number / boolean / Function—

事件 ​

事件名说明回调参数
change用户确认选定的值时触发value
blur在组件 Input 失去焦点时触发(e: FocusEvent)
focus在组件 Input 获得焦点时触发(e: FocusEvent)
clear 2.7.7可清空的模式下用户点击清空按钮时触发Function
calendar-change如果用户没有选择日期，那默认展示当前日的月份。 选中日历日期后会执行的回调，只有当 datetimerange 才生效[Date, Date]
visible-change当 DateTimePicker 的下拉列表出现/消失时触发出现时为true，隐藏时为false

方法 ​

方法名说明参数
focus使 input 获取焦点—

Slots ​

插槽名说明
default自定义单元格内容
range-separator自定义范围分割符内容
prev-month 2.8.0上个月的图标
next-month 2.8.0下个月的图标
prev-year 2.8.0上一年图标
next-year 2.8.0下一年图标

源代码 ​

文档