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-formattime-format 控制下拉列表面板输入框中显示的文本格式

-

日期和时间范围

设置typedatetimerange即可选择日期和时间范围

Default
To
With shortcuts
To

默认的起始与结束时刻

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

事件

事件名说明回调参数
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

Slots

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

Exposes

方法名说明类型
focus使组件获取焦点Function
blur 2.8.7使组件失去焦点Function

源代码

文档