TimeSelect 時間選擇

從固定檔位清單選時間(如每 30 分鐘一格)。使用 Element Plus 的 el-time-select。

設計準則

• 用於預約時段、營業時間這類「只開放固定檔位」的場景;任意時間用 TimePicker
• start / end / step 對齊真實的業務規則(營業 09:00–18:00、每 30 分鐘一班)
• 起訖成對出現時,用 min-time / max-time 連動,讓結束時間自動排除不合理的檔位

基本用法

loading

尺寸

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

loading

起訖連動

結束時間的可選檔位跟著開始時間走:

loading

Do / Don't

✅ Do	❌ Don't
固定檔位(預約、班次)	任意時間也硬切檔位(用 TimePicker)
起訖用 min-time / max-time 連動	讓使用者選出結束早於開始
檔位對齊真實業務規則	系統開 24 小時但店只開 9 小時

給工程師

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