iter(g215): 新增日期加时间组合配方

llms-full.txt

@@ -2566,6 +2566,40 @@ document.body.append(cmdk.el); // 面板是 fixed + 遮罩，挂 body 最省事
 - 一页只留一个实例用缺省 `hotkey`（⌘K / Ctrl+K），其余传 `hotkey: false` 自己绑，否则一次按键会同时开两个面板。
 - 命令集随权限变化时**重建实例**（`items` 是创建时快照），不要往原数组里 push。
 
+## 配方 13：预约时点（日期 + 时间两段拼装）
+
+```ts
+import { computed, signal } from '@ui-arch/frame';
+import { datePicker, form, formItem, timePicker, toast } from '@ui-arch/ui';
+
+const day = signal('');        // 日期段：YYYY-MM-DD
+const clock = signal('09:00'); // 时间段：HH:mm（给初值，用户只需要改自己想改的那半）
+const at = computed(() => (day() ? `${day()} ${clock()}` : '')); // 拼装交给业务层：两个组件各管一段，互不知道对方
+
+const dateField = formItem(
+  { label: '预约日期', value: day, required: true },
+  datePicker({ value: day, min: new Date().toISOString().slice(0, 10) }), // 早于今天的日期直接置灰，比事后校验更省事
+);
+const timeField = formItem(
+  { label: '预约时间', value: clock, required: true, hint: '每 15 分钟一档' },
+  timePicker({ value: clock, minuteStep: 15 }), // 步长只影响分列，时列始终 24 档
+);
+
+form({
+  layout: 'horizontal',
+  submitText: '确认预约',
+  items: [dateField, timeField],
+  onSubmit: () => toast.success(`已预约 ${at()}`), // 两段都非空才会走到这里：required 已经拦住半截状态
+});
+```
+
+要点：
+- **两段各管一段**：`datePicker` 只写 `YYYY-MM-DD`、`timePicker` 只写 `HH:mm`，拼成完整时点交给业务 `computed`——不要试图让某个组件同时产出日期与时间，否则一半值缺失时格式全靠猜。
+- **时间给初值**：`clock` 预置 `09:00` 这类合理默认，用户多数只想改小时；日期保持空值，避免「默认今天」被误提交。
+- **约束优先于校验**：日期上限下限用 `datePicker` 的 `min` / `max` 置灰，时间粒度用 `minuteStep` 收窄，`required` 只兜底空值——能点不出来的选项比报错文案更友好。
+- **半截状态别提交**：`form` 的 `required` 依赖各自 `value` 信号，日期没选时提交会被拦下并定位到该字段；不要自己写 `if (!day()) return` 之类的旁路判断。
+- 需要区间就用 `datePicker({ range: true })` + 两个 `timePicker`（起 / 止），拼装时各自独立，别指望一个信号同时表达两端。
+
 ## 通用约定
 
 - 状态一律放信号（`signal` / `computed`），组件只读写信号，不持有业务数据副本。