由於 Bootstrap 跟jQuery隨著程式更新出現越來越多的弱點，隨時更新套件到新版是程式要追求安全性必做的事項之一，但是每隔幾個版本就有可能出現破壞性更新，可能因為種種原因，例如原套件架構上無法修復，或是作者為了優化直接重寫架構，都有可能造成更新後原本的呼叫方式改變導致原本寫好的程式大規模無法運作。Bootstrap Datetimepicker做為一個常被套用的套件，如何套用新版的Tempus Dominus就變的很重要。
使用
首先先附上官方文檔：https://getdatepicker.com/6/options/
跟可以即時測試的頁面：https://getdatepicker.com/6/repl.html
寫法上跟datetimepicker不一樣，不是採用
$(‘#datetimepicker1’).datetimepicker();
的方式進行，而是改為
new tempusDominus.TempusDominus(input,option)的方式
option是對應到官方文檔提供的相關選項
這個input則是要綁定目標的dom元素，如果要用jQuery的寫法就是
$(‘#datetimepicker1’)[0]
若是網站上的所有日期選擇器我們都要採用統一的格式，我們也可以建立一個公用的js，然後以jQuery的方式
$(".custom-class").each(function () {
new TempusDominus($(this)[0], {
//選擇器設定
});
})
或是原生js的方式
var datetimeInputs = document.querySelectorAll('.custom-class');
datetimeInputs.forEach(function (input) {
new tempusDominus.TempusDominus(input, {
//選擇器設定
});
})
針對自定義的class套用上日期選擇器
即可快速的把舊版datetimepicker改為新版TempusDominus的寫法
Tempus Dominus在版本6以及更新的版本已經不再依賴jQuery套件，變的更靈活且易於使用
常用設定
以下介紹幾個開發上常用的TempusDominus設定
設定是採用json格式設定
localization
format:選擇完的日期格式（如：yyyymmdd）
locale:介面的語系設定（如：zh-tw）
restrictions
minDate:使用者可選擇的最小日期
maxDate:使用者可選擇的最大日期
display
icons:使用的Font Awesome的哪個icon
components:是否開啟／關閉某些介面顯示
例如：
calendar: true,（是否使用上半部的datepicker）
date: true,（是否可以使用日期選取）
month: true,（是否可以使用月份選取）
year: true,（是否可以使用年份選取）
decades: true,
clock: false,（是否使用下半部的timepicker)
hours: false,
minutes: false,
seconds: false,
useTwentyfourHour: false （是否使用24小時制）
defaultDate
預設器選擇的日期
C#安裝
經過測試，使用C#內建的方式加入cdnjs目前最新的datetimepicker為[email protected]
但是其在使用maxdate的時候好像沒有寫好造成maxdate不能是當天，而且報的是localization的錯誤，後來經過研究需要使用
jsdelivr的@eonasdan/[email protected]套件，比較新且有解決掉bootstrap-datetimepicker無法使用當天作為最大限制日期的問題。
結論
隨著前端技術的快速更新還有弱點掃描工具的進步，維持舊版的套件不更新會變得不再安全，保持套件版本的同步對於安全性和效能就變的至關重要。尤其是像Bootstrap和jQuery這類被廣泛使用在各種地方，隨著版本迭代經常會出現破壞性的更新。因此，如何平穩地從舊版本遷移到新版本顯得尤為重要。本文以Tempus Dominus這個日期選擇器為例，展示了從舊版datetimepicker遷移的過程。Tempus Dominus在新版本中移除了對jQuery的依賴，變得更靈活且更易於與現代前端框架整合。同時，在使用C#引入舊版本套件的新版時，應該要謹慎選擇合適的版本來源，以避免預料外的錯誤浪費大量時間，例如文中提到的maxdate設置的問題。透過正確的工具與方法，開發者可以更高效地應對這些技術挑戰。