Skip to content

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/ssstring
max可选范围(ISO 日期)string
min可选范围(ISO 日期)string
multiple多选(仅 type=date),值存 JSON 数组boolean
placeholder占位提示
type类型:date / daterange / month / datetimestringdate
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 关闭。

基于 MIT OR Apache-2.0 双许可发布