Tempus dominus 4から6にアップグレードする

デフォルトの設定は下記ページのドキュメント参照のこと。
Tempus Dominus

以下は、自プロジェクト用に少し修正したもの。

インポートするJS、CSSファイル

Tempus dominus 4

<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" />

Tempus dominus 6

<script src="https://cdnjs.cloudflare.com/ajax/libs/tempus-dominus/6.7.13/js/tempus-dominus.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempus-dominus/6.7.13/css/tempus-dominus.min.css" />

HTML

Tempus dominus 4と6で特に変更なし。

<label for="accountExpiredDate" th:text="#{user.accountExpiredDate}">user.accountExpiredDate</label>
<div class="input-group date" id="accountExpiredDatePicker" data-target-input="nearest">
  <input type="text" class="form-control datetimepicker-input" th:classappend="${#fields.hasErrors('accountExpiredDate')} ? is-invalid" th:field="*{accountExpiredDate}" th:placeholder="#{datetimepicker.format}" data-target="#accountExpiredDatePicker" />
  <div class="input-group-text" data-target="#accountExpiredDatePicker" data-toggle="datetimepicker">
    <em class="fas fa-calendar"></em>
  </div>
</div>

JavaScript

Tempus dominus 4

$('#accountExpiredDatePicker').datetimepicker({
  locale: 'ja',
  format: 'yyyy/MM/dd HH:mm',
})

Tempus dominus 6
※jQueryの使用は非推奨になった。

new tempusDominus.TempusDominus(document.getElementById('accountExpiredDatePicker'), {
  localization: {
    locale: 'ja',
    format: 'yyyy/MM/dd HH:mm',
  }
})

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です