date-range · 日期区间
财务/成本刚需。三件最容易漏：
① 必须有「清除」（填错了要能一键清空，而不是逐个退格）
② 约束校验：开始晚于结束、超出范围 ⇒ 明确报错（不静默）
③ 每个 input 有 <label>；错误用 role="alert" 播报
⚠️ 基于原生 <input type="date">：
原生自带触屏日历、本地化、键盘输入、无障碍语义 ——
自建日历要重做这一切，且移动端更差。
1 · 常用（无边界）
（onChange 会显示在这里）
2 · 限定范围（2020–2026）
（试着填一个 2019 年或 2027 年 ⇒ 会报错）
3 · 只读区间：drange--disabled + 原生 disabled
一件事要拆成两半做，缺一半就假。
· .drange--disabled 负责观感：预设与清除置灰、hover 不再变色；
· 原生 disabled 属性负责行为：点不动、Tab 跳过、
读屏念"不可用"。
只有类名 ⇒ 看着灰但点得动（最糟的一种）；只有属性 ⇒ 灰得不对，hover 还会亮。
这一块是已发布报表的冻结区间：读者要看懂区间，但不能改它。 留着可编辑只会让人以为自己填错了。
对比：错写法 vs 本库写法
❌ 常见写法：错误只改边框颜色
结束日期早于开始日期，界面上只是"红了一圈"：色觉障碍用户看不出来，灰度打印也看不出来，而且没有一句话告诉你错在哪。
✅ 本库：左侧竖线 + 一句话说明
形状（左侧竖线）与文字一起承担信息，颜色只是辅助 —— 这是 WCAG 1.4.1 的要求。同时 JS 会给两个字段打 aria-invalid 并用 aria-describedby 指到这句话。