タグ: Tempus Dominus Bootstrap

Tempus Dominus Bootstrap Ver.5とFont Awesome Ver.5を同時に使用する

Font Awesome Ver.5を使用している場合、Tempus Dominus Bootstrapのdatetimepickerの時間アイコンが表示されない。表示されない理由はVer.4以前で使用していたアイコン「fa-clock-o」がVer.5から「fa-clock」に変わっているため。

そこで、以下の通り新しいアイコンを直接指定するように修正する。

$('#accountExpiredDatePicker').datetimepicker({
  icons: {
    time: 'fas fa-clock',
    date: 'fas fa-calendar',
    up: 'fas fa-arrow-up',
    down: 'fas fa-arrow-down'
  }
})

<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-append" data-target="#accountExpiredDatePicker" data-toggle="datetimepicker">
    <div class="input-group-text"><em class="fas fa-calendar"></em></div>
  </div>
</div>