日期與時間元件
日期不是放一個 Calendar 就能解決。
先問使用者要輸入一個日期、從可用日挑選、查看日程、選擇時間，還是建立一段區間。看起來都和日期有關，資料與互動規則卻不同。
選型流程
先確認日期在任務中扮演什麼角色。
- 使用者要直接輸入或貼上日期嗎？是：使用 Date Input，格式、時區與錯誤規則都要可見。
- 只需要從可用日挑一個日期嗎？是：使用 Date Picker，標示已選與不可選日期。
- 重點是看某月有哪些事件嗎？是：使用 Calendar；它是瀏覽介面，不等於輸入欄位。
- 要選時間或開始與結束嗎？時間用 Time Picker；兩個日期與中間範圍用 Date Range Picker。
比較表
名稱相近，使用者要完成的事卻不同。
點選元件名稱可查看完整介紹、可操作 Demo、AI Prompt 與驗收清單。
| 比較面向 | Date Input｜日期輸入欄 | Date Picker｜日期選擇器 | Calendar｜月曆 | Time Picker｜時間選擇器 | Date Range Picker｜日期區間選擇器 |
|---|---|---|---|---|---|
| 使用者要完成的事 | 直接輸入或貼上確切日期 | 從可用日期中挑一個單日 | 瀏覽月份與日期上的資訊 | 選擇一天中的特定時間 | 選擇開始與結束兩個日期 |
| 是否是表單輸入 | 是 | 是 | 不一定 | 是 | 是 |
| 選取數量 | 一個日期 | 一個日期 | 多個日期資訊可被瀏覽 | 一個時間 | 兩個日期與中間區間 |
| 典型情境 | 合約日、匯入日期、精確排程 | 活動日期、預約日期 | 活動日程、會議月檢視 | 預約開始時間、截止時間 | 報名期間、住宿日期、篩選區間 |
| 最重要的規則 | 日期格式、時區、可用範圍 | 已選、不可選、關閉後結果 | 月份切換、事件摘要、今天 | 12/24 小時制、步進、營業時段 | 開始與結束順序、封鎖日、區間天數 |
| 不要拿來做 | 只靠 Placeholder 暗示格式 | 用來選開始與結束兩個日期 | 把瀏覽月曆當成輸入成功 | 用日期欄位假裝可選時間 | 拆成兩欄卻沒有選取順序或摘要 |
這組結論
月曆有用，但它不是每一個日期需求的答案。
需要精確輸入時，先寫清楚格式與時區；需要挑選時，說清楚可用日期；需要區間時，處理開始、結束與順序。讓 AI 知道「日期要怎麼被使用」，比只說「加一個 Calendar」更接近可驗收的畫面。
操作 Date Range Picker Demo →