DateTimePicker 日期时间选择器

使用

import { KDateTimePicker } from "@ksware/ksw-ux";

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

TIP

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

日期和时间点

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

日期时间格式

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

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

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

WARNING

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

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

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

日期和时间范围

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

默认的起始与结束时刻

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

自定义图标

使用插槽自定义图标。

API

Props

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

Events

事件名	描述	类型
change	用户确认选定的值时触发	`Function`
blur	在组件 Input 失去焦点时触发	`Function`
focus	在组件 Input 获得焦点时触发	`Function`
clear	可清空的模式下用户点击清空按钮时触发	`Function`
calendar-change	如果用户没有选择日期，那默认展示当前日的月份。仅用于 `range`	`Function`
panel-change	当日期面板改变时触发	`Function`
visible-change	当 DateTimePicker 的下拉列表出现/消失时触发	`Function`

Slots

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

Methods

方法名	描述	类型
focus	使 input 获取焦点	`Function`
blur	使 input 失去焦点	`Function`

DateTimePicker 日期时间选择器 ​

日期和时间点 ​

日期时间格式 ​

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

日期和时间范围 ​

默认的起始与结束时刻 ​

自定义图标 ​

API ​

Props ​

Events ​

Slots ​

Methods ​