活动报名、截止提交、预约开始日：用户要从一个连续区间里挑一天，并且系统对「过去日」「开放前」有明显约束。
界面与交互 · 操作与输入
日期选择器DatePicker
用日历网格或文本输入选择日期，并在选中的那一刻暴露范围、禁用、格式和时区规则的控件。
先选活动日期：落在范围里才能确认
日期选择器的每一步都长在物件上：日历格的选中/今日/禁用态、报名条物件、红色「不可报名」原因物件。先把它们操作出来，再解释为什么。
场景：活动从 2026-08-10 开放报名，演示中以 8/8 为今日。点日历网格选日子，或在文本框手输 YYYY-MM-DD——两者走同一条校验、喂同一条报名条物件。
可报名8 月 20 日 · 星期四Asia/Shanghai（UTC+8）
- 今日（描边 + 标注）
- 已选中（实心）
- 不可选（虚线，点读原因）
和网格点选用同一条规则：越界（早于 8/10）或格式错都会即时报错，并保留输入让你改。
对照：报名条物件显示当前选中 8 月 20 日 · 星期四，可报名。原因：8/20 在开放日 8/10 之后，规则放行，星期和时区跟值一起显示。下一步：点 8/8（今日）看它被挡的原因，或在文本框手输 2026-08-05 看越界校验。
实验台教会你的五条
在面板里点过一遍后，这些就不是背定义，而是你刚刚看到的结果。
- 范围与禁用是第一规则过去日、早于开放日的日子在网格里就是虚线不可选；点它们只会挂出原因，不会悄悄写进值——8/8（今日）也被挡，因为规则优先于「今天」。
- 禁用必须带文字原因不可选不能用颜色独撑：点禁用日时，报名条旁挂出红色「早于开放日 8/10」物件，读屏和键盘都能拿到。
- 手输与点选走同一条校验文本框和网格喂同一条报名条物件：手输 2026-08-05 越界、写错格式，都立刻标红并保留输入可改；不会出现点选过、手输却漏校验的裂缝。
- 选中即显示星期和时区报名条物件把「8 月 20 日 · 周四 · Asia/Shanghai（UTC+8）」和值一起给出，让用户在提交前就预见日程和时区归属。
- 错误在选中那一刻暴露，不是攒到提交越界、格式错、禁用日都在操作瞬间反馈；提交按钮只在输入有效时才生效，否则提示先改对——没有「提交了才知道错」。
什么时候用日期选择器，什么时候换别的
判断依据是「要选的是哪一天、规则有多严、候选项有多大」。
选日子常为了安排日程，显示星期能让用户一眼看出是不是周末；纯文本框做不到。
「今天、明天、后天」或几个固定档期，用 select 或 radio 更直接；日历网格反而多一次点击。
选钟点用 time-picker；选入住到退房这样的连续段用日期区间选择，它还要校验「退房晚于入住」。
怎么用：从选日到提交的最短路径
让范围、禁用、格式和时区都在选中那一刻暴露，键盘和读屏都能完成。
- 用日历网格做主交互，原生
<input type="date" min="2026-08-10" max="2026-08-31" />或自绘网格都行；min、max表达范围。 - 禁用日保留可聚焦，用
aria-disabled而非disabled，配方向键移动焦点；激活禁用日时读出原因，而不是无声忽略。 - 留一个文本输入做手输兜底，和网格共用同一个校验函数；两者都把结果写进同一个值物件，避免两套规则。
- 选中后立即显示「日期 · 星期 · 时区」；越界或格式错就地反馈，错误物件挂在字段旁边，并保留输入让用户改。
- 明确采用的时区与边界时刻；跨地区活动要在字段旁写出「按活动时区保存」，避免用户按浏览器时区误判。
正反例：同一个报名字段，只改规则反馈
目标都是采集一个活动日期。差别只在「范围和禁用有没有在选中那一刻说清」。
点 8/8 时网格挂出「早于开放日 8/10」；手输 2026-08-05 时输入框标红、原因物件出现，报名条保留上一次有效值；选 8/20 后报名条立刻给出「周四 · Asia/Shanghai」。提交只在输入有效时生效。
这样选过去日颜色变灰但仍可点；用户手输越界毫无提示，直到点提交才弹「日期无效」，还清空了输入。用户既不知道哪些日子能选，也搞不清错在格式还是范围，只能反复试。
别这么省快速自测
用户手输 2026-08-05（早于开放日 8/10），格式本身正确。系统最该做的是哪一项？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。