bootstrap

bootstrap4でのdatepickerの使い方

bootstrapで日付選択の入力ボックスを使いたいけどbootstrap-datepickerがbootstrap3まででサポート終わっているようなので単純に使えないみたいです。bootstrap4で無理やり使う方法をまとめます。クリアボタンの表示に滅茶苦茶ハマったので書き綴ります。

pom.xmlでwebjar取得

pom.xml

		<dependency>
		    <groupId>org.webjars</groupId>
		    <artifactId>momentjs</artifactId>
		    <version>2.24.0</version>
		</dependency>
		<dependency>
		    <groupId>org.webjars</groupId>
		    <artifactId>tempusdominus-bootstrap-4</artifactId>
		    <version>5.1.2</version>
		</dependency>

htmlのheadにimportを追記

html

  <link rel="stylesheet" type="text/css" th:href="@{/webjars/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css}" /> 
  <script type="text/javascript" th:src="@{/webjars/momentjs/2.24.0/min/moment.min.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/momentjs/2.24.0/min/moment-with-locales.min.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js}"></script>

htmlに処理追記

html

		<div class="input-group mb-3">
			<div class="input-group date">
				<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" id="datetimepicker1" />
				<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
					<div class="input-group-text"><i class="fa fa-calendar"></i></div>
				</div>
			</div>
		</div>

javascriptに処理追記

javascript

		$(function () {
	        $('#datetimepicker1').datetimepicker({
	            dayViewHeaderFormat: 'YYYY年MM月',
	            tooltips: {
	                close: '閉じる',
	                selectMonth: '月を選択',
	                prevMonth: '前月',
	                nextMonth: '次月',
	                selectYear: '年を選択',
	                prevYear: '前年',
	                nextYear: '次年',
	                selectTime: '時間を選択',
	                selectDate: '日付を選択',
	                prevDecade: '前期間',
	                nextDecade: '次期間',
	                selectDecade: '期間を選択',
	                prevCentury: '前世紀',
	                nextCentury: '次世紀'
	            },
	            format: 'YYYY/MM/DD',
	            locale: 'ja',
	            buttons: {showClear: true},
                icons: {
                    clear: 'fas fa-trash' // これ書かないとクリアボタン表示されない
                }
	        });
		});

-bootstrap
-