DatePicker 日期选择器
日期选择器,支持单日期、日期范围、月份与日期时间四种类型,键盘可操作,Intl.DateTimeFormat 格式化。
基础选择
基础用法(type=date)
点击输入框展开日期面板,点击日期选中并关闭。
日期范围
日期范围(type=daterange)
双月网格,先选起点再选终点,提交 JSON 数组 ["start","end"];悬停可预览区间。
月份选择
月份(type=month)
日期时间
日期时间(type=datetime)
选择日期与时分秒后点击「确定」提交。
禁用范围
min / max 限制
越界日期不可选。
快捷预设
快捷预设(shortcuts)
shortcuts(property,{ label, value } 或 { label, getValue() }),点击即应用并派发 oas-change、关闭面板。
范围快捷预设
范围快捷预设(shortcuts + daterange)
daterange 内置「今天 / 本周 / 本月 / 今年」预设;自定义时 value: [start, end] 或 getValue() 返回 [Date, Date]。
禁用日期
禁用过去日期(disabled-date)
disabledDate(property,(date: Date) => boolean)返回 true 的日期置灰不可选(点击与键盘导航均跳过)。
多选
多选(multiple)
multiple 时连续点选日期累加/取消,面板保持打开;值存 JSON 数组 ["yyyy-MM-dd", ...]。
自定义格式
format 自定义
format 支持 yyyy/MM/dd/HH/mm/ss token。
受控与事件
受控 + oas-change 事件
禁用
禁用(disabled)
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
disabled | 禁用 | boolean | — |
format | 展示格式 token(yyyy/MM/dd/HH/mm/ss) | string | — |
max | 可选范围(ISO 日期) | string | — |
min | 可选范围(ISO 日期) | string | — |
multiple | 多选(仅 type=date),值存 JSON 数组 | boolean | — |
placeholder | 占位提示 | — | — |
type | 类型:date / daterange / month / datetime | string | date |
value | 当前值:yyyy-MM-dd / yyyy-MM / yyyy-MM-ddTHH:mm:ss / JSON 范围数组 | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-change | 值变化,detail: { value }(daterange 为字符串数组;multiple 为字符串数组) |
Property
shortcuts:快捷预设(对象数组走 property,{ label, value }或{ label, getValue() });未设置时内置默认预设(标签走 locale)disabledDate:禁用日期回调,返回true的日期不可选(点击与键盘导航均跳过)
键盘:Enter / ↓ 展开,↑/↓/←/→ 在网格内移动,Enter 选中,Esc 关闭。