Skip to content

DateTimePicker 日期时间选择器

选择精确日期时间。采集、约束并校验用户输入。

实时示例

LIVE · DateTimePickerElement Plus / sunui
Vue 示例
<el-date-time-picker />

使用规则

应该

标签说明输入含义,帮助文本说明格式,错误信息说明原因和修复方式。

避免

不要通过局部硬编码改变品牌色、圆角或状态语义;不要隐藏必要的操作反馈。

状态与变体

  • 默认、悬停、聚焦、按下和禁用状态必须保持可辨识。
  • 加载、空、错误状态按业务影响选用,不用品牌强调色表达错误。
  • 紧凑尺寸只用于高密度后台场景,触控目标仍应满足可操作要求。

基础用法

<el-datetime-picker>日期时间选择器</el-datetime-picker>

设计变量

color.interactive.primarycolor.status.dangerspacing.smradius.sm

无障碍

字段必须有可关联标签;错误不能只用颜色表达;键盘顺序应与视觉顺序一致。