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

# はじめに
https://qiita.com/yaju/items/2ec8195df692cc6bf032

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

https://getdatepicker.com/

後継バージョン 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 を使ってみる](https://qiita.com/yaju/items/e2220f9e46b02fcd28d2)

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

<p class="codepen" data-height="720" data-default-tab="html,result" data-slug-hash="gOyQqrQ" data-user="yaju-the-encoder" style="height: 720px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yaju-the-encoder/pen/gOyQqrQ">
  Bootsrap5 DateTimePicker v6(tempusdominus)</a> by やじゅ (<a href="https://codepen.io/yaju-the-encoder">@yaju-the-encoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

https://getdatepicker.com/6/repl.html

変更前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/971a9850-9e47-228a-c7fa-978d285ce5ad.png)

変更後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/c598622a-25a1-c4a2-d7f1-5080e203f1b4.png)

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

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

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

```js
localization: {
  dayViewHeaderFormat: { year: '2-digit', month: 'long' },
                                 ↓
  dayViewHeaderFormat: { year: 'numeric', month: 'long' },
```
[How can I use dayViewHeaderFormat property? #2646](https://github.com/Eonasdan/tempus-dominus/discussions/2646)

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

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

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

```css
.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;
}
```

## ツールチップス
日本語に変更しています。

```js
  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`となります。

```js
localization: {
  startOfTheWeek: 1,
```

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

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

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

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

https://github.com/Eonasdan/tempus-dominus/issues/2537

## サイズを小さく

```css
/* 変更前は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;
}
*/
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/d53db82b-9223-e041-f079-d2c90b54605e.png)

## 範囲外の色変更
最大日付を設定した場合

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/14839d22-8e24-3a7f-a595-29ac35af271e.png)


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