DatePickerPanel 日期選擇面板

日期選擇器的「攤開版」:日曆直接嵌在頁面或彈窗中,不需點擊展開。使用 Element Plus 的 el-date-picker-panel。

設計準則

• 用於選日期是主要任務的介面(排程日曆、預約流程);表單裡順帶選個日期用收合的 DatePicker
• 面板常駐畫面,適合「選了日期,旁邊內容跟著變」的連動場景(選日期看當天排程)
• shortcuts、disabled-date 的準則與 DatePicker 相同
• 同一畫面不要同時出現多個面板

基本用法

loading

快捷選項

loading

展示類型

type 支援 12 種粒度:單一日期/週/月/年、複選(dates/months/years)、含時間(datetime)、 區間(daterange/datetimerange/monthrange/yearrange)。 選擇的粒度要對齊業務資料(月報就是 month),切換下方選單即可預覽每一種:

loading

Do / Don't

✅ Do	❌ Don't
選日期為主要任務時使用	表單裡順帶選日期也攤開(用 DatePicker)
選日期連動旁邊內容	面板選完還要按確認才有反應
一個畫面一個面板	多個面板並排

給工程師

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