もくじ
はじめに
前回の記事で<input type="date">とすると、IEでカレンダーを表示できない問題を解決すべく、カレンダーをライブラリを使って表示できるようにします。
今回使用するのはdatetimepickerです。このライブラリはbootstrapを採用していますが本家はbootstrap4はサポートしていないらしいので、Tempus Dominus氏が本家を後継して制作されたものを使用したいと思います。
本家：https://eonasdan.github.io/bootstrap-datetimepicker/
後継：GitHub - tempusdominus/bootstrap-4: Tempus Dominus Bootstrap 4 Datetime Picker
Font Awesomeを導入
datetimepickerで使われるアイコンを表示するためにFont Awesomeを導入しておきます。
Font Awesomeとはアイコンなどを無料で使えるライブラリです。今回はversion5.15.1です。
CDN
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
ファイルの<head>タグに上記を記述します。
最新のコードは公式ドキュメントから「Using Web Fonts with CSS」項目にあるコードをご確認ください。
ダウンロード
Font Awesomeにアクセスします。
クリックするとダウンロードされます。
ダウンロードしたzipを解凍します。
Web フォントとして使う場合（Using Web Fonts with CSS）、「css」フォルダと「webfonts」フォルダをコピーして配置します。
ディレクトリ構成はダウンロードしたままになるようにファイルだけコピーする場合もフォルダを作成しましょう。
「css」フォルダ内のall.min.cssを<head>〜</head>内でlinkタグを使って読み込みます。
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
好きなアイコンを探す
アイコンを好きなものに変えることができます。このリンク先を参照してください。
datetimepickerを導入
CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-2JBCbWoMJPH+Uj7Wq5OLub8E5edWHlTM4ar/YJkZh3plwB2INhhOC3eDoqHm1Za/ZOSksrLlURLoyXVdfQXqwg==" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-PMjWzHVtwxdq7m7GIxBot5vdxUY+5aKP9wpKtvnNBZrVv1srI8tU6xvFMzG8crLNcMj/8Xl/WWmo/oAP/40p1g==" crossorigin="anonymous" />
ファイルの<head>タグに上記を記述します。
最新のコードは公式ドキュメントからご確認ください。
ダウンロード
初心者の私にはこれがなかなか見つけられなくて時間かかりました。同じような方の助けになれば幸いです。
jquery
まずjqueryを用意します。
※bootstrapを導入していればjqueryはすでにあるはずです。
moment.js
次にmoment.jsをダウンロードします。
これは、日付を処理するライブラリです。DateTimePickerに限らず、日付を扱うライブラリで日本語化したりするのに便利かつ人気です。
Moment.js | Homeにアクセスしダウンロードしましょう。
下の画像を参考に、moment.jsならA、moment.min.jsならBを右クリックでダウンロードします。
moment.jsとmoment.min.jsの違いがわからなければmoment.min.js（B）がいいでしょう。
ダウンロードできたら、スクリプトを読み込みます。リンク先は適宜変更してください。
<script type="text/javascript" src="../moment.min.js"></script>
tempusdominus-bootstrap-4
ここで本題のtempusdominus-bootstrap-4をダウンロードします。
これがわかりにくく、見つけるのに苦労しました。公式ドキュメントにはすでにダウンロードした前提で書かれてあるので、そのファイルどこやねーん！！てなります。初心者ゴロシ。
実はGitHubからダウンロードします。
GitHubにcssとjsのフォルダがあるので、momentjs同様に拡張子にmin付きか無しか選択してダウンロードします。
このとき、単純にリンクを右クリックしてダウンロードしても中身が変わってしまいうまくいきませんでした。
tempusdominus-bootstrap-4をダウンロード
GitHub - tempusdominus/bootstrap-4: Tempus Dominus Bootstrap 4 Datetime Pickerにアクセスし、タグを開きます。
今までのバージョンが確認できるので、最新版や安定版があればそれをダウンロードしましょう。
GitHubのライブラリをダウンロードする際は、最新版があっても「安定版」があればそちらをダウンロードするほうが無難です。
今回は、アルファ版があったり安定版はなかったりなので、いちお最新版（v5.1.2）をダウンロードします。
ダウンロードした中身を確認すると、GitHubのブラウザで確認したとおりですね。
このbuildディレクトリにあるファイル（上の画像：選択しているファイル）を、自分のプロジェクト配下にコピペしましょう。
参考にあらず
ここは読み飛ばして、「tempusdominus-bootstrap-4を読み込む」に進んでください。
以下は、とてもアナログな方法なのであまり参考にしないでください。書き残しておきますが、取り消し線にしておきます。
まずダウンロードしたいリンクを右クリックからダウンロードします。CSSとJSをダウンロードしましょう。
このときCSSは拡張子が変わってしまうので変更しておきます。
そしてダウンロードしたファイルの中身を開いておきます。これを★とします。
次に先ほどダウンロードしたリンク先にアクセスします。すると中身を確認できます。
中身を丸ごとコピーしてください。
★のファイルの中身をすべてコピーした内容に書き換えます。（ペースト）
CSSもJSも同じように中身を書き換えてください。
ファイルの準備はこれで完了です。
tempusdominus-bootstrap-4を読み込む
ようやくこれで、公式ドキュメントに書いてあった通り記述して読み込むことができます。リンク先は保存したディレクトリ に適宜変更してください。
<script type="text/javascript" src="/path/to/tempusdominus-bootstrap-4.min.js"></script> <link rel="stylesheet" href="/path/to/tempusdominus-bootstrap-4.min.css"/>
コード
基本的なコード
HTMLにコードを記述して完成です。
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#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>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
このフォームの右にあるアイコンが、先に導入しておいたFont Awesomeのアイコンです。
他にもクリックした先で使われるアイコンらを表示するために、今度はFont Awesomeを使えるようにします。
カスタマイズ
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="far fa-calendar"></i></div> // classを微変更
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
dayViewHeaderFormat: 'YYYY年 MMMM',
tooltips: {
close: '閉じる',
selectMonth: '月を選択',
prevMonth: '前月',
nextMonth: '次月',
selectYear: '年を選択',
prevYear: '前年',
nextYear: '次年',
selectTime: '時間を選択',
selectDate: '日付を選択',
prevDecade: '前期間',
nextDecade: '次期間',
selectDecade: '期間を選択',
prevCentury: '前世紀',
nextCentury: '次世紀',
pickHour: '時間を取得',
incrementHour: '時間を増加',
decrementHour: '時間を減少',
pickMinute: '分を取得',
incrementMinute: '分を増加',
decrementMinute: '分を減少',
pickSecond: '秒を取得',
incrementSecond: '秒を増加',
decrementSecond: '秒を減少',
togglePeriod: '午前/午後切替',
selectTime: '時間を選択'
},
format: 'YYYY/MM/DD HH:mm',
locale: 'ja',
icons: {
time: 'far fa-clock',
date: 'far fa-calendar-alt',
up: 'fas fa-arrow-up',
down: 'fas fa-arrow-down'
},
buttons: {
showClose: true
}
});
});
</script>
<i class="far fa-calendar"></i>のclassを変更するとアイコンが変わります。
参考URL
Bootstrap 4でDatetimePickerを使いたい - Qiita
GitHub - tempusdominus/bootstrap-4: Tempus Dominus Bootstrap 4 Datetime Picker
