Tempus Dominus
Bootstrap 4 に対応した DateTimePicker
参考：
Bootstrap 4 Datetime Picker | Tempus Dominus [Official]
tempusdominus/bootstrap-4: Tempus Dominus Bootstrap 4 Datetime Picker – GitHub
ドキュメント
参考：
Usage | Tempus Dominus [Official]
Functions | Tempus Dominus [Official]
Options | Tempus Dominus [Official]
bootstrap4-datetime-picker-rails
Bootstrap 4 に対応した DateTimePicker を Ruby on Rails で使うための gem
参考：
Documentation for bootstrap4-datetime-picker-rails | RubyDoc.info
Rails の FormBuilder で使う
参考：
Extras | Tempus Dominus [Official]
momentjs-rails
Moment.js を Ruby on Rails で使うための gem
参考：
使い方
参考：
Bootstrap 4 で DatetimePicker を使いたい – Qiita
グローバルデフォルトの設定
ロケールを日本語にして、Font Awesome 5 のアイコンを使う設定をする。
$.fn.datetimepicker.Constructor.Default = $.extend(
{}, $.fn.datetimepicker.Constructor.Default,
{
locale: 'ja',
icons: {
time: 'far fa-clock',
date: 'far fa-calendar-alt',
up: 'fas fa-arrow-up',
down: 'fas fa-arrow-down',
previous: 'fas fa-chevron-left',
next: 'fas fa-chevron-right',
today: 'far fa-calendar-check',
clear: 'far fa-trash-alt',
close: 'fas fa-times'
}
}
)
参考：
Options | Tempus Dominus [Official]
Default – bootstrap-4/tempusdominus-bootstrap-4.js at 5.1.2 · tempusdominus/bootstrap-4 – GitHub
日付のみを選択する
format: 'L' を指定する。
$('#datetimepicker').datetimepicker({
format: 'L'
})
参考：
Date Only | Tempus Dominus [Official]
外部クリックで非表示にならない
日時選択ダイアログを開いている時にダイアログ外をクリックしてもダイアログが閉じない。
原因：
blur イベントハンドラをアタッチするために、input 要素に datetimepicker-input クラスを指定する必要がある。
対処法：
DateTimePicker を使う input 要素に datetimepicker-input クラスを指定する。
参考：
Can’t auto hide when click outside · Issue #195 · tempusdominus/bootstrap-4 – GitHub
ソース
参考：
bootstrap-4/tempusdominus-bootstrap-4.js at master · tempusdominus/bootstrap-4 – GitHub
その他／代替手段
参考：
Rails で datetimepicker を使用する手順 | blog @arfyasu
Rails で bootstrap datetimepicker を日本語化しつつ導入 | なんとなく日々徒然と