iter(g50): 新增 datePicker 日期选择组件

This commit is contained in:
HIsheR
2026-10-26 12:13:56 +08:00
parent e5c7778de5
commit e270e09903
12 changed files with 460 additions and 10 deletions
+47 -1
View File
@@ -62,7 +62,8 @@
"transfer(props):穿梭框,左右两栏勾选后整体搬运,targetKeys 信号双向绑定,两栏各自搜索与全选(含半选),禁用条目不参与搬运也不可勾选",
"cascader(props):级联选择,多列联动面板(悬停下钻 / 点击提交),value 为路径数组信号,changeOnSelect 允许停在中间层,全键盘可操作",
"splitter(props):可拖拽分栏容器,分隔条支持指针拖拽 / 方向键微调 / 双击复位,sizes 为百分比数组信号",
"autoComplete(props):输入联想,输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起,options 可传函数做远程联想"
"autoComplete(props):输入联想,输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起,options 可传函数做远程联想",
"datePicker(props):日期选择,单月网格 + 翻月 / 今天快捷键,value 为 YYYY-MM-DD 信号,min/max 闭区间限制,方向键逐日逐周可导航"
],
"keyTypes": [
"ButtonProps",
@@ -2123,6 +2124,51 @@
"options 传函数时每次输入都会用当前关键字调用,可在此发起远程请求并返回新数组",
"value 传信号即受控:外部写入会同步回填输入框内容"
]
},
{
"id": "datePicker",
"title": "日期选择 DatePicker",
"demo": "sec-datepicker",
"props": [
{
"n": "value",
"t": "Signal<string>",
"d": "选中日期(YYYY-MM-DD)信号;不传则内部维护"
},
{
"n": "placeholder",
"t": "string",
"d": "未选时占位文案;缺省「请选择日期」"
},
{
"n": "min",
"t": "string",
"d": "最早可选日期(含,YYYY-MM-DD);更早的日置灰不可点"
},
{
"n": "max",
"t": "string",
"d": "最晚可选日期(含,YYYY-MM-DD);更晚的日置灰不可点"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
"d": "禁用触发器"
},
{
"n": "onChange",
"t": "(date: string) => void",
"d": "选中回调(点击日期或 Enter)"
}
],
"example": "datePicker({ value: dateVal, min: '2026-10-20', max: '2026-10-31', onChange: (d) => toast.success(d) })",
"steps": [
"点触发器展开当月网格,打开时视图自动对准已选日期(无选中则今天)",
"‹ › 翻月,底部「今天」一键跳今天并提交;今天用描边标记、选中用实心底色",
"键盘:←→ 逐日、↑↓ 逐周、PageUp/PageDown 逐月、Enter 提交,跨月会自动翻页",
"min / max 为闭区间,越界日期置灰不可点也不可键盘选中",
"value 传信号即受控;Esc 收起(与弹窗/抽屉共用逐层关闭栈)"
]
}
]
}