日期时间选择器
在一个选择器中选择日期和时间。
提示
日期时间选择器是由日期选择器和时间选择器派生而来的。 有关属性的更详细解释，您可以参考 日期选择器 和 时间选择器。
日期和时间
日期时间格式
使用 format 属性可以控制输入框中显示的文本格式。 使用 value-format 属性可以控制绑定值的格式。
默认情况下，该组件接受并返回一个 Date 对象。
点击这里查看 Day.js 中所有可用的格式。
警告
注意大小写
下拉面板中的日期和时间格式
使用 date-format 和 time-format 来控制下拉面板中输入框的格式。
日期和时间范围
开始日期和结束日期的默认时间
自定义图标 2.8.0
可以使用插槽来自定义图标。
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值，如果它是一个 range 选择器，数组的长度应该是 2 | number / string / Date / array | '' |
| 只读 | 日期选择器是否只读 | boolean | false |
| disabled | DatePicker 是否被禁用 | boolean | false |
| 可编辑 | 输入框是否可编辑 | boolean | true |
| 可清空 | 是否显示清除按钮 | boolean | true |
| size | 输入框尺寸 | 枚举 | default |
| 占位符 | 非范围选择时的占位内容 | string | — |
| start-placeholder | 范围模式下开始日期的占位符 | string | — |
| end-placeholder | 范围模式下结束日期的占位符 | string | — |
| arrow-control | 是否使用箭头按钮选择时间 | boolean | false |
| type | 选择器类型 | 枚举 | 日 |
| format | 输入框中显示值的格式 | string 详见 日期格式 | YYYY-MM-DD HH:mm:ss |
| popper-class | 日期时间选择器下拉框的自定义类名 | string | — |
| popper-style | 日期时间选择器下拉框的自定义样式 | string / object | — |
| popper-options | 自定义 popper 选项，更多请看 popper.js | object | {} |
| fallback-placements 2.8.4 | Tooltip 的可能位置列表 popper.js | array | ['bottom', 'top', 'right', 'left'] |
| placement 2.8.4 | 下拉框出现的位置 | 位置 | bottom |
| range-separator | 选择范围时的分隔符 | string | '-' |
| default-value | 可选，选择器打开时默认显示的时间 | object | — |
| 默认时间 | 选中日期后的默认时间。 如果不指定，则使用时间 `00:00:00` | object | — |
| value-format | 可选，绑定值的格式。 如果未指定，则绑定值为 Date 对象 | string 详见 日期格式 | — |
| date-format 2.4.0 | 可选，输入框内部面板中显示的日期格式 | string 详见 日期格式 | YYYY-MM-DD |
| time-format 2.4.0 | 可选，输入框内部面板中显示的时间格式 | string 详见 日期格式 | HH:mm:ss |
| id | 与原生 input 的 `id` 属性相同 | string / object | — |
| 名称 | 与原生输入框的 `name` 相同 | string | — |
| 取消面板链接 | 在范围选择器中取消两个日期面板的链接 | boolean | false |
| 前缀图标 | 自定义前缀图标组件 | string / Component | 日期 |
| clear-icon | 自定义清除图标组件 | string / Component | CircleClose |
| 快捷选项 | 设置快捷选项的对象数组 | object | — |
| 禁用日期 | 一个用来判断该日期是否被禁用的函数，接受一个日期作为参数。应该返回一个布尔值 | Function | — |
| disabled-hours | 指定无法选择的小时数组 | Function | — |
| disabled-minutes | 指定无法选择的分钟数组 | Function | — |
| disabled-seconds | 指定无法选择的秒数数组 | Function | — |
| 单元格类名 | 设置自定义的类名 | Function | — |
| teleported | 日期时间选择器下拉列表是否传送到 body 元素 | boolean | true |
| empty-values 2.7.0 | 组件的空值，参见 config-provider | array | — |
| value-on-clear 2.7.0 | 清除返回值，参见 config-provider | string / number / boolean / Function | — |
| show-now 2.8.7 | 是否显示“此刻”按钮 | boolean | true |
| show-footer 2.10.5 | 是否在日期选择器为 enum 时显示页脚 | boolean | true |
| show-confirm 2.11.0 | 是否显示确认按钮 | boolean | true |
| show-week-number 2.10.3 | 在周旁边显示周数 | boolean | false |
事件
| 名称 | 描述 | 参数 |
|---|---|---|
| change | 当用户确认值或点击外部时触发 | Function |
| blur | 在 Input 失去焦点时触发 | Function |
| focus | 在 Input 获得焦点时触发 | Function |
| clear 2.7.7 | 在可清除的日期时间选择器中点击清除图标时触发 | Function |
| 日历更改 | 本日历所选日期发生更改时触发。 仅适用于 range | Function |
| 面板更改 | 在点击导航按钮时触发。 | Function |
| visible-change | 在日期时间选择器的下拉列表出现/消失时触发 | Function |
插槽
| 名称 | 描述 |
|---|---|
| default | 自定义单元格内容 |
| range-separator | 自定义范围分隔符内容 |
| prev-month 2.8.0 | 上个月图标 |
| next-month 2.8.0 | 下个月图标 |
| prev-year 2.8.0 | 上一年图标 |
| next-year 2.8.0 | 下一年图标 |
暴露
| 方法 | 描述 | 类型 |
|---|---|---|
| focus | 聚焦日期选择器组件 | Function |
| blur 2.8.7 | 使日期选择器组件失焦 | Function |
类型声明
显示声明
ts
type Placement =
| 'top'
| 'top-start'
| 'top-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end'
| 'right'
| 'right-start'
| 'right-end'