DateRangePickerでRangeでなく単日、時間を選べるようにするときのオプションメモ

  $(selector).daterangepicker(
    "singleDatePicker": true,
    "timePicker": true,
    "timePickerIncrement": 5,
    "autoUpdateInput": false,
    locale: {
      format: 'MMMM D, YYYY HH:mm'
    },
    (datetime) ->
      $(selector).val(datetime.format('MMMM D, YYYY HH:mm'))
  )

空欄も許可するような場合には、autoUpdateInputをfalseにしておかないといけないが、falseにするとカレンダーを表示してApplyを押しても反映されないので、callback部分でセットするようにした。

今回ここで引っかかったのは、フォーマットを結構変えているので、フォームに事前にvalueがセットされている場合にdaterangepickerでセットしているformatに従わない場合、「Invalid date」みたいな感じになるので、

dateTimePicker = (selector) ->
  unless $(selector).val() == ''
    datetime = moment($(selector).val()).format('MMMM D, YYYY HH:mm')
    $(selector).val(datetime)

  $(selector).daterangepicker(
    "singleDatePicker": true,
    "timePicker": true,
    "timePickerIncrement": 5,
    "autoUpdateInput": false,
    locale: {
      format: 'MMMM D, YYYY HH:mm'
    },
    (datetime) ->
      $(selector).val(datetime.format('MMMM D, YYYY HH:mm'))
  )

こんな感じにしておいた。
こういう感じにしておくと、1ページに複数のカレンダーUIが必要になっても、dateTimePickerに突っ込んでOKになるので割と便利。