DatePicker 範式 · 設計初版
DateField（打字）、DatePicker（單日）、DateRangePicker（區間）三個組合。先打字再點；單日選了就關，區間兩下並按套用；格式 YYYY/MM/DD、月份用數字。
示範日期一律 2026 年 10 月，不帶業務語彙；格式、週起始、min／max、預設捷徑清單與時區由子系統接入時提供。
① DateField — 先讓人打字：真正的輸入框（遮罩 YYYY/MM/DD）＋ calendar icon，日曆只是輔助
空（placeholder）
YYYY/MM/DD
有值（可清除）
2026/10/12
錯誤（失焦後檢查）
2026/13/05
格式錯誤：月份需為 01–12
② DatePicker 展開 — 點 icon 或按 ↓ 開；單月日曆；選了就關，底部沒有按鈕
2026/10/15
9 日＝今天（muted 底）、15 日＝已選（primary）、9/27–9/30＝上月（outside）。週起始預設週日，可設週一。
⑥ DateTime — 日期與時間分開：DatePicker ＋ 時間 Select（15 分鐘刻度）
2026/10/12
時間選項 00／15／30／45；要精確到分鐘的場景才改成可打字的時間欄位。
⑧ 手機 — 窄視窗（< 640）退 bottom sheet：上方 handle、單月日曆、底部取消／確定
選擇日期
示意寬 384（size/96，最接近 390 的一階）；手機上選日後按確定才關。
③ DateRangePicker 收合 — 一個欄位顯示起迄；起迄都可打字
有值
2026/10/01 – 2026/10/15
錯誤（迄早於起）
2026/10/15 – 2026/10/01
迄日不能早於起日
④ DateRangePicker 展開 — 左側預設捷徑、雙月；第一下起、第二下迄，選完不自動關，按套用才生效
今天
昨天
近 7 天
近 30 天
本月
上月
自訂
2026/10/01 – 2026/10/15 · 15 天
⑤ hover 預覽 — 已點起點 10/01，游標停在 10/08：中段先用 range-middle 預覽，點下去才成為迄日
今天
昨天
近 7 天
近 30 天
本月
上月
自訂
hover 預覽：2026/10/01 – 2026/10/08 · 8 天（尚未點第二下）
⑦ disabled 與 min／max — 早於可選日的格子灰字、不可點
可選 2026/10/09 起