日期時間選擇器
⌚️ 此篇文章整理開發專案時，實際遇到的問題與解決辦法
📋 目錄
Datetime Picker 介紹
📅 官網：Tempus Dominus Bootstrap 4 datetimepicker
Bootstrap 4 日期時間選擇器插件，提供大量配置參數，製作簡單實用的日期選擇器效果。特點如下：
- 支持語言國際化和時區。
- 支持日期選擇模式和時間選擇模式。
- 支持最大和最小日期選擇。
- 支持禁用指定的日期。
- 支持年/星期預覽模式。
- 支持某個星期中禁用某些天。
- 可自定義日期格式。
- 提供大量的配置參數和API接口。
基礎套件使用
最基礎的設定可以參考官方文件 🔍
預設樣式如下圖所示：
進階調整區間
實作專案時，有著連動限制關係存在時，如下圖所示：
若選定 5min，對應的最大時間差距為 12 小時，假如 end time 固定取 render頁面的時間。裡面的 minDate, maxDate 要隨著 period 的選擇作調整。
(已先拿掉樣式設定部分) index.html 檔案有關 datetimepicker 部分如下：
搭配的 JS 檔案，說明於註解中。如下(只有收錄精華部分)：
其中比較特別的部分，是每一次重新繪製 datetimpicker 需要使用 ‘destroy’ 來銷毀，如果沒有 destroy 則無法重新設定。
客製化樣式
若不喜歡套件的預設樣式，可以選擇修改 tempusdominus-bootstrap.css 檔案，或是在自己的 style.css 設定去覆蓋原本的。
在使用 F12 開發人員工具去觀察畫面時，會遇到一個問題：滑鼠點擊時間的 input 框框，出現 dropdown 時，觀測的游標消失，欲觀察 dropdown 裡面的元素不能直接用習慣的方式。
針對這個問題，筆者在發問討論區找到此篇文章：How can I inspect disappearing element in a browser?
其中 Mojtaba 的回覆，完美地解決上述問題💜
setTimeout(()=> {debugger;},5000) console 輸入這一行，五秒後會呈現 debugger 的模式，在這五秒內可以去點擊時間欄位框框以便觀察。且這樣的解法不只用於此情形，未來有遇到類似觀察不到的元素也很適用。
於專案中，筆者修改 style.css 檔案，以覆寫的方法蓋掉原本的樣式。
最後選擇器呈現樣式如下：
成果還不錯吧 🙌
✨ Time to shine!
