el-date-picker 控制可選日期範圍 時間選擇只顯示小時 並控制小時可選範圍

現在 需要做一個 時間選擇器  ,可以根據 小時(同時選天和小時) 和天 和月,節假日等類型控制日曆的選擇樣式

解決  根據上面的類型切換 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

根據用戶選擇的是否爲當天  來切換 選擇範圍。 從而解決了該問題

這樣解決了  時間選擇顯示到小時  ,並且可以控制小時顯示範圍的問題,

效果圖

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章