デフォルトの設定は下記ページのドキュメント参照のこと。
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',
}
})