DateTimePicker 日期时间选择器

在同一个选择器中同时选择日期和时间。本组件由 DatePicker 通过 type="datetime" / "datetimerange" 实现。

import { createApp } from 'vue'
import { ElDatePicker } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElDatePicker)

日期和时间点

将 type 设为 datetime 即可同时选择日期与时间，并可通过 shortcuts 配置快捷选项。

日期时间格式

使用 format 指定展示格式，使用 value-format 指定绑定值的格式；不设置时绑定值为 Date 对象。

日期和时间范围

设置 type 为 datetimerange 即可选择一段日期时间范围。

默认起止时刻

范围选择时可通过 default-time 控制选中日期后使用的默认时刻，数组中两项分别对应开始和结束。

禁用状态

通过 disabled 属性禁用选择器；通过 disabled-date 函数禁用指定的日期。

API

Attributes

属性	说明	类型	默认值
model-value / v-model	绑定值	Date / string / number / array	—
type	选择器类型	datetime / datetimerange	date
format	展示格式	string	YYYY-MM-DD HH:mm:ss
value-format	绑定值格式	string	—
default-time	默认时刻	Date / [Date, Date]	—
shortcuts	快捷选项	array	—
disabled-date	禁用日期判断函数	Function	—
range-separator	范围分隔符	string	-

Events

事件	说明	参数
change	用户确认选值后触发	val
blur / focus	失焦 / 获焦	—
visible-change	下拉面板显示状态变化	visible

详见 Element Plus DateTimePicker 文档。