60 秒決策
先確認使用者要完成的事。
適合使用
- 使用者需要同時選擇開始與結束日期，例如報名期間、住宿或篩選區間。
- 區間長度、不可選日期或開始與結束順序會影響規則。
不適合使用
- 只需要一個單日。
- 使用者只是在瀏覽活動月曆而不需要輸入區間。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
先後順序看得出來
開始日與結束日要有固定名稱與選取流程，不能只放兩個沒有關係的日期欄位。
完整區間有摘要
有效選取後顯示開始、結束與共幾天，避免使用者自行心算。
日期限制在選取前就顯示
過去日、封鎖日與最長區間先在月曆中說明，不要等送出才擋住。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
等待開始日
使用者知道第一步是選開始日期。
等待結束日
開始日已固定，提示下一步選結束日期。
有效區間
開始、結束與區間長度清楚呈現。
順序錯誤
結束早於開始時保留兩個值並指明如何修正。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
活動報名期間
先觀察：開始、結束、過去日期與區間摘要是否同時清楚。
操作：先選 8 月 18 日，再選 8 月 22 日；接著嘗試把結束日改成 8 月 15 日。
預期結果：有效區間顯示共幾天；順序錯誤保留值並要求修正；過去日期無法選取。
可操作 Demo
選擇活動報名期間
活動報名期間
先選開始日，再選結束日；8 月 12 日之前不可選。
開始2026-08-18→結束2026-08-22
已選擇 2026-08-18 至 2026-08-22，共 5 天。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立一個活動報名期間的 Date Range Picker。使用者先選開始日再選結束日，2026-08-12 之前不可選；若結束日早於開始日，要保留兩個值並提示修正。選定有效區間後顯示開始、結束與共幾天，提供重新選取與清除功能，且所有日期按鈕可用鍵盤操作。驗收清單
不要只確認欄位能不能點。
- 開始與結束是否有清楚名稱與選取順序？
- 過去、封鎖與不可用日期是否在月曆中可辨識？
- 結束早於開始時是否保留值並回饋？
- 有效區間是否顯示天數與完整摘要？
- 鍵盤、手機與螢幕閱讀器能否完成兩次選取？