DatePicker 设计文档
日期选择器,type=date 日历面板 / type=dateTime 日期+时间(复用 TimePicker 时分秒列)/ type=month 月份面板 / type=year 年份面板,受控/非受控;显示与星期/月份/年份均经 Intl.DateTimeFormat 本地化。支持 multiple 多选(value 为 Date[]、max 上限)、presets 快捷选项(可置四向)、format token 串使触发器变可输入文本框、disabledDate/disabledTime 禁用、密度/无边框/自定义单元格与触发器渲染、面板四向 slot。日期区间选择用配套的 RangePicker。
← API 文档使用建议
日期选择器,type=date 日历面板 / type=dateTime 日期+时间(复用 TimePicker 时分秒列)/ type=month 月份面板 / type=year 年份面板,受控/非受控;显示与星期/月份/年份均经 Intl.DateTimeFormat 本地化。支持 multiple 多选(value 为 Date[]、max 上限)、presets 快捷选项(可置四向)、format token 串使触发器变可输入文本框、disabledDate/disabledTime 禁用、密度/无边框/自定义单元格与触发器渲染、面板四向 slot。日期区间选择用配套的 RangePicker。
Accessibility
ARIA role:dialog
- 触发器 button aria-haspopup=dialog、aria-expanded、aria-controls 指向面板
- 面板 role=dialog;日期网格 role=grid,单元格 role=gridcell + aria-selected
- 触发器 Enter/Space/↓ 打开;面板内方向键移动高亮日、Enter 选中、Esc 关闭
- roving tabindex:仅高亮日可聚焦
- type=dateTime:时/分/秒列 role=listbox + option,选日期不关面板,点确定关闭
- disabledTime:dateTime 时/分/秒列被禁用值 aria-disabled、点击/键盘无效(分/秒列联动已选时/分)
- presets:面板侧边快捷日期按钮 role=group,点击直接选中(dateTime 连带时间)并关闭
- type=month:12 个月格,头部显示年份 + 左右切年;点月份选中并关闭
- type=year:一页 12 年(一十年 + 前后各 1 占位),头部显示十年范围 + 左右切十年;点年份选中并关闭
- format:传 token 串(YYYY/MM/DD/HH/mm/ss)时触发器变 text 输入框,显示+手输解析均走 formatDate/parseDateString;不传沿用 Intl 显示
- insetInput:面板顶部渲染可编辑输入框(date 一个日期框;dateTime 日期框+时间框),键盘用户可直接键入起止日期;Enter/blur 提交解析,Esc 关闭;与日历/时间列选择双向同步
- 年月滚轮快速跳转(PANEL_YAM,对齐 Semi):点头部年/月标题(button aria-expanded)展开年 + 月两列 ScrollList(复用 ScrollList,role=listbox 逐列),选中即跳转面板游标(不写 value),「返回」按钮回日期网格;yearAndMonthOpts.yearCyclic/monthCyclic 控制列循环滚动;type=year 面板仍走十年格,不进滚轮
设计变量
该组件暂无专属设计变量。