はじめに
Bootstrap3 Datepicker v4は、カレンダーを表示して、日付/時間を選択、取得できるライブラリです。
ここでは、Bootstrap3 Datepicker v4でカレンダーを表示する手順を説明します。このカレンダーを使って予約システム（予約情報入力⇒送信⇒予約情報の表示）を作り解説したのでこちらも参考にしてください。
構成
フォルダの構成は下記を想定しています。
project
├ index.html
├ src
│ ├ css
│ │ ├ bootstrap.min.css
│ │ └ bootstrap-datetimepicker.min.css
│ └ js
│ │ ├ jquery-3.5.1.min.js
│ │ ├ moment-width-locales.min.js
│ │ ├ bootstrap.min.js
│ │ └ bootstrap-datetimepicker.min.js
│ └ fonts
│ ├ glyphicons-halflings-regular.eot
│ ├ glyphicons-halflings-regular.svg
│ ├ glyphicons-halflings-regular.ttf
│ ├ glyphicons-halflings-regular.woff
│ └ glyphicons-halflings-regular.woff2
カレンダー表示手順
1. ファイル準備
Bootstrap 3 Datepicker v4のカレンダー表示に必要なファイルを準備します。それぞれのバージョンがあっていないと正常に表示されないので注意です（私はここで躓きました）
必要なファイルと取得方法について記載しますので参考にしてください。もちろんCDNから持ってきてもOKですが、バージョンに注意しましょう。（bootstrapはv3でdatetimepickerはv4です）
| ライブラリ名 | 種類 | 取得先URL | 備考 |
|---|---|---|---|
| jquery | js | https://jquery.com/download/ | 最新のバージョンをダウンロードしてください。ここではcompressedを使います |
| moment | js | https://momentjs.com/ | カレンダーを日本語表記するためにmoment-with-locales.jsをダウンロードしてください。moment.jsだと日本語化できないので注意です。 |
| bootstrap | js,css | https://getbootstrap.com/docs/3.4/getting-started/#download | 「Download Bootstrap」からダウンロードしてください。cssフォルダおよびjsフォルダ内に必要なファイルがあります。またfontsも使用します。このfontsがないとカレンダーで使用するアイコンが正常に表示されません。 |
| bootstrap-datetimepicker | js,css | https://github.com/Eonasdan/bootstrap-datetimepicker | gitHubからソースをダウンロードします。buildフォルダ内に必要なcss, jsファイルがあります。 |
2. index.html作成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- js -->
<script src="src/js/jquery-3.5.1.min.js"></script>
<script src="src/js/moment-with-locales.min.js"></script>
<script src="src/js/bootstrap.min.js"></script>
<script src="src/js/bootstrap-datetimepicker.min.js"></script>
<!-- css -->
<link rel="stylesheet" href="src/css/bootstrap.min.css">
<link rel="stylesheet" href="src/css/bootstrap-datetimepicker.min.css">
<title>カレンダー表示サンプル</title>
</head>
<body>
<div class="p-apoint-panel-day u-mb15">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#calendar').datetimepicker({
inline: true,
minDate: moment().format("YYYY/MM/DD"),
locale: 'ja'
});
$("#calendar").on("dp.change", function (event) {
console.log(event.date.format("YYYY-MM-DD"));
});
})
</script>
</body>
</html>
（index.html 解説）
まず、headタグ内でファイルを読み込みます。bodyタグ内にカレンダーを表示する用のタグ<div id="calendar"></div>を記載します。id名はなんでもOKです。
scriptタグ内にカレンダーの設定を記載します。
$('#calendar').datetimepicker({
inline: true,
minDate: moment().format("YYYY/MM/DD"),
locale: 'ja'
});
inline: trueにするとカレンダーをデフォルトでVisibleの状態で表示できます。この設定がない場合、カレンダーはボタンをクリックしないと表示されず、input要素が必要になります（公式サイトで確認してみてください）
minDate: ここで設定した日付以前の日付は選択できなくなります。
locale: 日本語にする場合は'ja'とします。この設定がない場合は英語になります。
$("#calendar").on("dp.change", function (event) {
console.log(event.date.format("YYYY-MM-DD"));
});
この処理は、カレンダーをクリックしたときに実行されます。クリックした日付をブラウザのコンソール画面に出力します。
3. 表示確認
index.htmlを起動し、下記のようなカレンダーが表示されていれば成功です。日付をクリックするとconsoleに日付が出力されます。
最後に
ゼロから調べてたのでかなり時間がかかりましたが、いざまとめてみるとあっさりと終わりました。カレンダーを使ってなにか作りたい人に役に立てばと思います！