60 秒決策
先確認使用者要完成的事。
適合使用
- 使用者要從可用日期中挑一個單日，且月曆有助於理解。
- 需要讓不可選日期、今天與已選日期在同一個月曆中清楚呈現。
不適合使用
- 使用者常直接貼上或輸入精確日期，且不需要瀏覽月曆。
- 任務其實是選開始與結束兩個日期。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
開啟前也要看得出結果
收合狀態要顯示目前日期、格式與開啟月曆的明確控制。
已選、今天、不可選要不同
不要只用顏色；每種日期都要有可辨識的文字或可存取名稱。
選完後要回到欄位
選取單日後關閉月曆並回報結果，避免使用者猜是否已經套用。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
收合
顯示尚未選取或目前已選日期。
展開
顯示月份、星期、可選日期與鍵盤可操作的日期按鈕。
已選日期
已選日期在月曆與欄位文字都有一致回饋。
不可選日期
過去日期或不開放日期無法選取，且有原因提示。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
單日活動選擇
先觀察：已選日期、過去日期與重設控制是否可區分。
操作：打開月曆，選擇 8 月 18 日，再按重設。
預期結果：選取後狀態立即更新；過去日期不能選；重設可回到未選狀態。
可操作 Demo
挑選單一活動日期
從可用日期中選擇一天；2026-08-12 之前不可報名。
2026 年 8 月先選一天
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立一個活動日期的 Date Picker。預設顯示目前已選日期；開啟後以月曆讓使用者選擇單日，2026-08-12 之前不可選，已選日期要明顯標示。選擇後關閉月曆、更新文字回饋，並提供重設按鈕與鍵盤可操作的日期按鈕。驗收清單
不要只確認欄位能不能點。
- 可否用鍵盤移動到日期並選取？
- 已選、今天與不可選日期是否可辨識？
- 選完是否明確更新欄位？
- 月曆關閉後焦點是否回到合理位置？
- 手機是否有足夠大的日期點擊範圍？