DatePicker 日期選擇器

選擇日期或日期區間。使用 Element Plus 的 el-date-picker。

設計準則

• 日期格式全產品統一用 EP 預設的 YYYY-MM-DD,不要每個畫面自訂格式
• 報表、列表的日期篩選一定給 shortcuts 快捷選項(今天/近 7 天/近 30 天),多數使用者根本不點日曆
• 用 disabled-date 把不合理的日期擋掉(排程不能選過去、回溯查詢不能選未來),不要等送出才報錯
• 只需要月或年的粒度就用 type="month" / type="year",不要讓使用者在日曆裡選一天再無視它
• 需要精確到時、分時改用 DateTimePicker

基本用法

loading

尺寸

跟著同一列元件的尺寸走:後台表單用預設,表格內、工具列用 small:

loading

日期區間(含快捷選項)

報表篩選的標準配置:區間 + shortcuts:

loading

單個面板

區間選擇預設展開左右兩個月曆;在彈窗、側欄這類窄容器裡用 single-panel 收成一個, 省空間但翻月次數變多——版面放得下就用預設雙面板:

loading

其他日期單位

粒度對齊業務資料:月報用月、年度目標用年;需要不連續的多天(如多個發送日)用 dates 複選:

loading

週、複選日期/月份/年份:

loading

限制可選日期

用 disabled-date 擋掉不合理的日期,附文字說明規則:

loading

Do / Don't

✅ Do	❌ Don't
報表篩選給 shortcuts	每次都要手點兩次日曆
disabled-date 擋不合理日期	送出才報「日期不可早於今天」
月報用 type="month"	選 1 號再假裝它是整個月
全產品統一 YYYY-MM-DD	每頁一種日期格式

給工程師

完整 API 見 Element Plus DatePicker 文件。 本站規範優先於 EP 文件中的視覺建議。