Bootstrap 5でDateTimePicker(tempusdominus v6)を使いたい

はじめに

DatetimePicker(tempusdominus)の後継バージョン v6が出ており、Bootstrap、momentjs、jQuery の依存関係が不要になっています。
https://github.com/Eonasdan/tempus-dominus

後継バージョン v6が出ていたのですが、ずっと放置のまま前記事に「いいね」が付くのは偲びないので、GWの休みを使って記事を書くことにしました。

環境

ライブラリー	バージョン
bootstrap 5	5.3.3(latest)
popper.js	2.11.6
font awesome	6.5.1
tempus-dominus	6.9.4

CodePen

QiitaではCodePenが埋め込み可能なので貼っておきます。
jsdo.it の移行先として CodePen を使ってみる

【2024/06/01】インラインを追加

See the Pen Bootsrap5 DateTimePicker v6(tempusdominus) by やじゅ (@yaju-the-encoder) on CodePen.

変更点

デフォルトはテーマカラーがあるため、シンプルな表現になっています。

変更前

変更後

書式

デフォルトがMM/dd/yyyyyで表示されてしまうので、yyyy/MM/ddに変更しています。

localization: {
  format: 'yyyy/MM/dd',

ヘッダーの年4桁

デフォルトは年2桁になっているのですが、年4桁に変更しました。

localization: {
  dayViewHeaderFormat: { year: '2-digit', month: 'long' },
                                 ↓
  dayViewHeaderFormat: { year: 'numeric', month: 'long' },

How can I use dayViewHeaderFormat property? #2646

曜日を太字

曜日を太字に変更しました。

.date-container-days div.dow {
  color: #000 !important;
  font-weight: bold;
}

土日の色

土日に色を付くように変更しました。土曜日が青色、日曜日が赤色です。

.date-container-days div.dow {
  color: #000 !important;
  font-weight: bold;
}

.date-container-days div.dow:first-child {
  color: #f00 !important;
}

.date-container-days div.dow:nth-child(7) {
  color: #00f !important;
}

.date-container-days div.day.weekend {
  color: #f00;
}

.date-container-days div.day:nth-child(7n) {
  color: #00f;
}

.date-container-days div.day.old.weekend,
.date-container-days div.day.new.weekend {
  color: #00000060;
}

ツールチップス

日本語に変更しています。

  localization: {
    today: '本日',
    close: '閉じる',
    selectMonth: '月を選択',
    previousMonth: '前月',
    nextMonth: '次月',
    selectYear: '年を選択',
    previousYear: '前年',
    nextYear: '次年',
    selectDecade: '期間を選択',
    previousDecade: '前期間',
    nextDecade: '次期間',
    previousCentury: '前世紀',
    nextCentury: '次世紀',
    pickHour: '時間を取得',
    incrementHour: '時間を増加',
    decrementHour: '時間を減少',
    pickMinute: '分を取得',
    incrementMinute: '分を増加',
    decrementMinute: '分を減少',
    pickSecond: '秒を取得',
    incrementSecond: '秒を増加',
    decrementSecond: '秒を減少',
    toggleMeridiem: '午前/午後切替',
    selectTime: '時間を選択',
  },

月曜始まり

今回は適用しませんでしたが、日曜始まりではなく月曜始まりのカレンダーにしたい場合、startOfTheWeekを1に変更してください。初期値は0となります。

localization: {
  startOfTheWeek: 1,

月曜始まりのカレンダーにした場合、土日の色の設定を変更する必要があります。

変更イベント

インライン表示にした場合、変更した日付を取得する。

picker4.subscribe('change.td', (event) => {
  alert(picker4.dates.formatInput(event.date));
});

変更イベントは最初全然分からなかったです、一体どうしたら取得できるんだと。
検索しまくりで下記Issueを見つけて、subscribe('change.td'を見つけ出しようやく取れた。また、event.dateのままではなく、フォーマット定義の状態で取得したかった。これもこのIssueの中からdates.formatInputを見つけ出し変換することで対応できた。

サイズを小さく

/* 変更前は19rem */
.tempus-dominus-widget {
  width: 16rem;
}

/* 変更前は40px */
.tempus-dominus-widget .date-container-days {
  grid-auto-rows: 20px !important;
}

/* 変更前は6px */
.tempus-dominus-widget .date-container-days div:not(.no-highlight).today:before {
  bottom: 0px !important;
  right: 0px !important;
}

/* 文字を小さくしたい場合
.date-container-days div.day {
  font-size: 14px;
}
*/

範囲外の色変更

最大日付を設定した場合

restrictions: {
  maxDate: new Date('2024/06/20 23:59:59')
}

範囲内の文字を目立たせるために、範囲外の色をより薄くしました。

.date-container-days div.day.disabled {
    color: #dee2e6 !important;

最後に

これで、jquery や moment.js から脱出することが出来ました。