結論から言うと、「Flatpickr」を使いましょうというお話。
前提条件いろいろ
もう来年（2023年）には Internet Explorer は廃止になって勝手にアンインストールされるとかされないとか。それなのにいまだに IE 対応を求めてくる顧客がいるのはなぜなのでしょうね・・・。リリースは来年4月以降なのに。
IE 対応だと HTML やら JavaScript やら色々と制約あるため、種々の条件を検討した結果、 Spring Boot + Thymeleaf + Bootstrap4 で開発することになりました。 Vue とか React は IE 対応で苦労しそうなので使いません・・・。
日付や年月を入力したい
業務アプリは大抵の場合、日付入力が必要になります。入力のしやすさを求められるので、単なるテキストボックスに「YYYY/MM/DD形式で入力してください」などという仕様は許されるはずもなく、カレンダーからの入力を求められます。ところがBootstrap4で開発を進めていくと、なんとも面倒なことに、 bootstrap-datepicker は Bootstrap3 までしか対応してないし、jQuery の datepicker を使おうとすると jQuery UI のバージョンが合わなかったりして一筋縄ではいきませんでした。
Flatpickr
色々調べたら Flatpickr は Bootstrap や jQuery に依存しないということで、これを導入することにしました。
Maven の pom.xml にはこんな感じで dependency を定義します。
<!-- https://mvnrepository.com/artifact/org.webjars.npm/flatpickr -->
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>flatpickr</artifactId>
<version>4.6.13</version>
</dependency>
ビューには <head> 配下にこんな感じで書いて css と js を読み込みます。今回は「日付入力」だけでなく「年月入力」も必要なので monthSelect プラグインを導入し、 css クラス名は日付入力を fl-datepicker に、年月入力を fl-ympicker とすることにします。なお dateFormat は submit したときにサーバー側で受け取る日付文字列のフォーマットで、 altFormat で画面表示の際の日付文字列のフォーマットを定義することができます。
<!-- Flatpickr -->
<link rel="stylesheet" th:href="@{/webjars/flatpickr/dist/plugins/monthSelect/style.css}">
<link rel="stylesheet" th:href="@{/webjars/flatpickr/dist/flatpickr.min.css}">
<script th:src="@{/webjars/flatpickr/dist/flatpickr.min.js}" defer></script>
<script th:src="@{/webjars/flatpickr/dist/l10n/ja.js}" defer></script>
<script th:src="@{/webjars/flatpickr/dist/plugins/monthSelect/index.js}" defer></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
flatpickr('.fl-datepicker', {
locale: 'ja',
altFormat: 'Y年m月d日',
altInput: true,
dateFormat: 'Y-m-d'
});
flatpickr('.fl-ympicker', {
locale: 'ja',
altInput: true,
plugins: [new monthSelectPlugin({
altFormat: 'Y年m月',
dateFormat: 'Y-m'
})]
});
});
</script>
<body> には<input type="text"> を使ってこんな感じで書きます。
<div class="form-group">
<label for="ymd1">日付１：</label>
<input type="text" id="ymd1" class="fl-datepicker" value="2022/12/02"><br>
</div>
<div class="form-group">
<label for="ym1">年月１：</label>
<input type="text" id="ym1" class="fl-ympicker" value="2022/12"><br>
</div>
IE で表示すると、日付はこんな感じになります。
年月はこんな感じ。
その他いろいろ
Flatpickr は MIT ライセンスなので業務利用も可能です。
見た目をカスタマイズしたい場合は公式サイトやflatpickr - にほんご。を参考にしてください。
ちなみに Windows 11 で IE 11 を表示するには、「コントロールパネル」で「インターネットオプション」を開いて、「プログラム」タブの「アドオンの管理」をクリックして、「ツールバーと拡張機能の詳細」をクリックします。