DateTime 日期时间选择器
组合选择日期和时间的组件。
何时使用
当用户需要同时选择日期和时间时使用。
基础用法
点击输入框弹出面板,选择日期和时间。格式 YYYY-MM-DD HH:mm。
vue
<TDateTime v-model="dt" placeholder="选择日期时间" />仅日期
设置 :enable-time="false" 隐藏时间选择区,仅选择日期。
vue
<TDateTime :enable-time="false" placeholder="仅选择日期" />固定时间
设置 fixed-time="09:00" 锁定时间,仅可调整日期。
vue
<TDateTime fixed-time="09:00" placeholder="时间固定 09:00" />分钟步长
通过 minute-step 控制分钟选项的递增步长。
vue
<TDateTime :minute-step="15" placeholder="步长15分钟" />尺寸
支持 sm、默认、lg 三种尺寸。
vue
<TDateTime size="sm" placeholder="小尺寸" />
<TDateTime placeholder="默认" />
<TDateTime size="lg" placeholder="大尺寸" />可清除
vue
<TDateTime :model-value="'2026-06-01 14:30'" clearable />带秒选择
设置 show-seconds 显示秒列,支持 YYYY-MM-DD HH:mm:ss 格式。
vue
<TDateTime show-seconds placeholder="选择含秒的时间" />API
TDateTime 属性 (Props)
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
model-value | 日期时间值(v-model,格式 YYYY-MM-DD HH:mm) | string | '' |
placeholder | 占位符 | string | '选择日期时间' |
disabled | 禁用 | boolean | false |
size | 尺寸 | 'sm' | 'lg' | undefined |
clearable | 可清除 | boolean | false |
enable-time | 启用时间选择 | boolean | true |
fixed-time | 固定时间(如 "09:00") | string | undefined |
min | 最小可选日期 | string | undefined |
max | 最大可选日期 | string | undefined |
disabled-date | 自定义禁用日期函数 | (date: string) => boolean | undefined |
minute-step | 分钟步长 | number | 5 |
show-seconds | 显示秒列 | boolean | false |
TDateTime 事件 (Emits)
| 事件名 | 说明 | 回调参数 |
|---|---|---|
update:model-value | 值变化 | (value: string) => void |
change | 用户确认选择 | (value: string) => void |