現在 需要做一個 時間選擇器 ,可以根據 小時(同時選天和小時) 和天 和月,節假日等類型控制日曆的選擇樣式
解決 根據上面的類型切換 type 爲 datetime,date,和month來解決顯示問題,
功能點1.
重大節假日 就是隻有節假日可選 type 爲 date 控制可以選擇的具體日期(例如五一 是5.1-5.5 5天可選)
功能點2.
小時 需求是 時間選擇器 可以同時選擇日期 和時間,只可以選擇小時並且 分和秒 不顯示
解決功能點1
理解disabledDate 設置值 爲不可以選的時間
重大節假日需要後臺 或者你自己寫好可以選擇的日期, obj裏面的data爲可選日期集合 dayjs(date).format("YYYYMMDD")只是對日期就行格式化方便對比 是否包含
效果
用該方式 解決了 控制日期可選範圍問題
解決功能點2
先看一下 el-date-picker 因爲要同時出現日期和時間選擇 所以type選擇"datetime" 看一下默認樣式
設置format 爲 yyyy-MM-dd 此時 時間 會顯示到分鐘可選 沒有了 秒
這裏還需要 把分鐘可選去掉,嘗試很多設置方式沒有解決,最終解決是通過隱藏 分鐘模塊控件
這樣解決了 只顯示到小時 的需求 效果如下
現在還有一個問題 就是 控制今天 現在小時之後的 小時不可選
這樣解決了當前之後的小時不可選 但是這時候引發了新的問題 例如今天10月2號 14點 那麼 15,16等以後不能選是正確的 當你選擇到其他日期 例如 10月1 日 應該是所有 小時可選 但是現在的話 也是不能選的
這時候需要動態的控制 上圖中 selectableRange 的值 ,但是這裏有格式要求不能動態用this.xxxx來設置或者不生效
所以 寫了兩個 expireTimeOption
根據用戶選擇的是否爲當天 來切換 選擇範圍。 從而解決了該問題
這樣解決了 時間選擇顯示到小時 ,並且可以控制小時顯示範圍的問題,
效果圖