职责与结构
日期选择记录无时间的日历日期。时间点必须另定义时间与时区；日期区间用于筛选或周期输入，不将本地午夜转换为 UTC 后存储。
字段标签 + 日期输入／月历触发器 + 清空操作 + 帮助与校验反馈。日期范围有独立的开始、结束标签。
变体与 Tokens
| 项目 | 规范 |
|---|---|
| 单日 | 原生 input type="date" 配合 .control；可直接键盘输入或使用平台日历。 |
| 日期范围 | 两个日期字段共享边界；允许单边开放范围的筛选，但本页周期示例明确要求两端。 |
| 禁用／必填／错误 | 使用 disabled / required / min / max；非法范围提供明确错误、aria-invalid 与描述关联。 |
| 自定义月历 | 现有筛选与待办的月历作为业务应用引用，必须遵守相同日期值、范围、清空和键盘规则。 |
输入继承 --control-md、--radius-sm、--space-3、--surface-control 和共享错误／焦点色。自定义弹层复用浮层 Tokens 与 dsPopupGeometry 边界计算，不叠加多层玻璃。
交互与状态示例
交互与无障碍
值采用 YYYY-MM-DD，按日历日期比较；min / max 包含端点，结束不能早于开始。清空后恢复空值与有效状态。Tab 顺序遵循标签、字段和操作；原生日期输入的日历外观与按键由浏览器决定。自定义月历应提供方向键移动、月份切换、Esc 关闭和触发器焦点恢复，不能仅支持鼠标。窄屏范围字段自动换行。
接入约定
| 项目 | 规范 |
|---|---|
| value / min / max / required / disabled | 使用原生 date 属性；本页演示范围 2026-01-01 至 2026-12-31，不是系统固定业务限制。 |
| input / change / validity | 原生事件提供字段值；本页在 input 与 change 时联动校验，setCustomValidity + aria-invalid + 可见错误同步。 |
| 范围提交 | 仅两端均有效且 start ≤ end 才展示本地确认；实际后端由业务接入，clear 将值和自定义错误一起清除。 |
查看最小使用示例
<label>开始日期<input class="control" type="date" name="start" required></label>
// 提交前校验 start <= end；日期值按 YYYY-MM-DD 保存。维护位置：scripts/family-specimens.mjs；示例行为：scripts/family-specimens.js。组合应用见本页末尾引用。