RailsでBootstrap4のDatePickerを実装する

Bootstrap4で関連するライブラリはまだ追いついてないと思いきやDatePickerは使えるようになっていたので、 お伝えします。

前提

bootstrap4をインストールしていること

インストール

gem 'bootstrap4-datetime-picker-rails'
gem 'momentjs-rails'

bundle install

app/assets/javascripts/application.js

//= require moment
//= require moment/ja.js # 日本語化
//= require tempusdominus-bootstrap-4.js

View

適宜、haml・slim・erbに変換してください。

<div class='input-group date' id='datetimepicker' data-target-input='nearest'>
  <div class='input-group-append' data-target='#datetimepicker' data-toggle='datetimepicker'>
    <input type='text' id='scenario_delivery_attributes_custom_delivering_at' class='form-control datetimepicker-input' data-target='#datetimepicker' name='hoge' />
  </div>
</div>

JavaScript

$(セレクタ).datetimepicker() でカレンダーが起動します。 datetimepickerとtimepickerを使い分けたい場合は、idを変えてあげれば大丈夫です。

カスタマイズもdatetimepicker()の中に設定を書いて上書きすれば反映されます。 TimePickerは format: 'LT' を指定してください。

hoge.js

$(function () {
  $('#datetimepicker').datetimepicker({
    icons: {
      time: 'fa fa-clock',
    }
  });
  $('#timepicker').datetimepicker({
      format: 'LT'
  });
});

■ 日付 + 時間

■ 時間

カスタマイズ用スクリプト

$('#datetimepicker-demo').datetimepicker({
  // requires moment-timezone.js
  timeZone: '',
  // date format
  // http://momentjs.com/docs/#/displaying/format/
  format: false,
  dayViewHeaderFormat: 'MMMM YYYY',
  extraFormats: false,
  // step size
  stepping: 1,
  // min/max dates
  minDate: false,
  maxDate: false,
  // uses current date/time
  useCurrent: true,
  // uses Bootstraps collapse to switch between date/time pickers
  collapse: true,
  // https://github.com/moment/moment/tree/develop/locale
  locale: moment.locale(),
  // default date
  defaultDate: false,
  // disabled dates
  // array of [date, moment, string]
  disabledDates: false,
  // enabled dates
  // array of [date, moment, string]
  enabledDates: false,
  // default icons
  icons: {
    time: 'fa fa-clock-o',
    date: 'fa fa-calendar',
    up: 'fa fa-arrow-up',
    down: 'fa fa-arrow-down',
    previous: 'fa fa-chevron-left',
    next: 'fa fa-chevron-right',
    today: 'fa fa-calendar-check-o',
    clear: 'fa fa-delete',
    close: 'fa fa-times'
  },
  // tooltip options
  tooltips: {
    today: 'Go to today',
    clear: 'Clear selection',
    close: 'Close the picker',
    selectMonth: 'Select Month',
    prevMonth: 'Previous Month',
    nextMonth: 'Next Month',
    selectYear: 'Select Year',
    prevYear: 'Previous Year',
    nextYear: 'Next Year',
    selectDecade: 'Select Decade',
    prevDecade: 'Previous Decade',
    nextDecade: 'Next Decade',
    prevCentury: 'Previous Century',
    nextCentury: 'Next Century',
    pickHour: 'Pick Hour',
    incrementHour: 'Increment Hour',
    decrementHour: 'Decrement Hour',
    pickMinute: 'Pick Minute',
    incrementMinute: 'Increment Minute',
    decrementMinute: 'Decrement Minute',
    pickSecond: 'Pick Second',
    incrementSecond: 'Increment Second',
    decrementSecond: 'Decrement Second',
    togglePeriod: 'Toggle Period',
    selectTime: 'Select Time',
    selectDate: 'Select Date'
  },
  // uses strict
  useStrict: false, 
  // displays side by side
  sideBySide: false, 
  // disabled days of the week
  daysOfWeekDisabled: false,
  // shows the week of the year
  calendarWeeks: false,
  // 'decades','years','months','days'
  viewMode: 'days',
  // toolbar placement
  toolbarPlacement: 'default',
  // enable/disable buttons
  buttons: {
    showToday: false,
    showClear: false,
    showClose: false
  },
  // widget position
  widgetPositioning: {
    horizontal: 'auto',
    vertical: 'auto'
  },
  // string or jQuery object
  widgetParent: null,
  // ignore read only input
  ignoreReadonly: false,
  // always keep open
  keepOpen: false,
  // shows on focus
  focusOnShow: true,
  // inline mode
  inline: false,
  // makes the date picker not revert or overwrite invalid dates
  keepInvalid: false,
  // debug mode
  debug: false,
  // shows on focus and icon click
  allowInputToggle: false,
  // disables time selection
  disabledTimeIntervals: false,
  // disables/enables hours
  disabledHours: false,
  enabledHours: false,
  // changes the viewDate without changing or setting the selected date
  viewDate: false,
  // allows multiple dates
  allowMultidate: false,
  // custom separator
  multidateSeparator: ','
});

参考

github.com

www.jqueryscript.net

github.com