DateTimePicker 日期时间选择器

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

TIP

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

日期和时间点

日期时间格式

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

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

这里 查看 Day.js 支持的 format 参数。

WARNING

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

日期和时间范围

默认的起始与结束时刻

属性

属性说明类型可选值默认值
model-value / v-model选中项绑定值date(DateTimePicker) / array(DateTimeRangePicker)
readonly只读booleanfalse
disabled禁用booleanfalse
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
size输入框尺寸stringlarge/default/smalldefault
placeholder非范围选择时的占位内容string
start-placeholder范围选择时开始日期的占位内容string
end-placeholder范围选择时结束日期的占位内容string
time-arrow-controlwhether to pick time using arrow buttonsbooleanfalse
type显示类型stringyear/month/date/datetime/ week/datetimerange/daterangedate
format显示在输入框中的格式stringsee date formatsYYYY-MM-DD HH:mm:ss
popper-classDateTimePicker 下拉框的类名string
range-separator选择范围时的分隔符string-'-'
default-value可选,选择器打开时默认显示的时间Date可被new Date()解析的所有值
default-time选中日期后的默认具体时刻若为非时间范围: Date / 若为时间范围: Date[]非范围选择时:Date 对象;范围选择时:数组,长度为 2,每项值为 Date 对象,第一项指定开始日期的时刻,第二项指定结束日期的时刻。 不指定会使用时刻 00:00:00
value-format可选,绑定值的格式。 不指定则绑定值为 Date 对象string查看 日期格式
id等价于原生 input id 属性string / array(string)字符串 id="my-date" 对应单个日期或数组 :id="['my-range-start', 'my-range-end']" 对应日期范围-
name等价于原生 input name 属性string
unlink-panels在范围选择器里取消两个日期面板之间的联动booleanfalse
prefix-icon自定义前缀图标string / ComponentDate
clear-icon自定义清除图标string / ComponentCircleClose
shortcuts设置快捷选项,需要传入数组对象object[{ text: string, value: date / function }]
disabledDate一个用来判断该日期是否被禁用的函数,接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。function
cellClassName设置自定义类名Function(Date)
teleported是否将 datetime-picker 的下拉列表插入至 body 元素booleantrue / falsetrue

事件

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

方法

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

插槽

插槽名说明
default自定义单元格内容
range-separator自定义范围分割符内容

源代码

文档