iter(g158): 日期选择支持快捷区间预设

This commit is contained in:
HIsheR
2026-10-26 16:00:40 +08:00
parent 476747aaca
commit 638f623750
7 changed files with 73 additions and 7 deletions
+3 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T07:54:36.201Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T08:00:04.262Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -1406,6 +1406,7 @@ autoComplete({ value: acValue, placeholder: '输入组件名', options: [{ value
- min:string —— 最早可选日期(含,YYYY-MM-DD);更早的日置灰不可点
- max:string —— 最晚可选日期(含,YYYY-MM-DD);更晚的日置灰不可点
- disabled:boolean | Signal<boolean> —— 禁用触发器
- presets:DatePreset[] —— 快捷区间按钮组(仅区间模式渲染):每项给 label + days(相对今天含今天),或 label + from/to 绝对日期;越界结果按 min/max 钳制,点击即写入 value/end 并收起
- onChange:(date: string) => void —— 选中回调(点击日期或 Enter)
示例:
@@ -1423,6 +1424,7 @@ datePicker({ value: dateVal, min: '2026-10-20', max: '2026-10-31', onChange: (d)
5. value 传信号即受控;Esc 收起(与弹窗/抽屉共用逐层关闭栈)
6. 选日期区间传 range: true:第一次点击只定起点(触发器显示「起 ~ …」),第二次点击补终点并收起,两端之间用低比重底色连成一条
7. 区间回调走 onRangeChange(start, end),参数已排序——用户先点晚的日期也不会出现 start > end;只需检视当前值就同时读 value 与 end 两个信号
8. 传 presets 在弹层顶部加一排快捷区间按钮:{ label: '最近 7 天', days: 7 } 走相对今天,{ label: '本月', from: '2026-10-01', to: '2026-10-31' } 走绝对日期(两者都给时 days 优先),点一下即写入并收起,回调照旧走 onRangeChange
现场演示:apps/docs/demo.html#sec-datepicker