datetimepicker オプションまとめ

目次

基礎編：
Lv.1 日付のフォーマットを指定
Lv.2 過去の日付は選択できないようにする
Lv.3 現在から◯日後からではないと選択できないようにする
Lv.4 デフォルトの時間を00:00にする

応用編：
Lv.5 10時〜18時の時間帯のみ選択できるようにする
Lv.6 日曜日は選択できないようにする

基礎編

Lv.1 日付のフォーマットを指定

common.js.coffee

$.datetimepicker.setLocale('ja')
$ ->
  $('.js-datetimepicker').datetimepicker(
    format: 'Y-m-d H:i'
   #入力して際のフォーマットが"2020-04-20 00:00"みたいになる
  )

他にも'yyyy/mm/dd' 'Y年 n月j日'といったフォーマットがあります。

Lv.2 過去の日付は選択できないようにする

common.js.coffee

$.datetimepicker.setLocale('ja')
$ ->
  $('.js-datetimepicker').datetimepicker(
    format: 'Y-m-d H:i'
    minDate: 0
    #今日の日付が入力できる０地点にする
  )

Lv.3 現在から○日後からではないと選択できないようにする

4日後の場合

common.js.coffee

$.datetimepicker.setLocale('ja')
 $ ->
  d.setDate(d.getDate() + 4);
 #現在よりプラス4日の日付を入力可能最低日とする
  $('.js-datetimepicker-three-days-later').datetimepicker(
    format: 'Y-m-d H:i:'
    minDate: d
  )

Lv.4 デフォルトの時間を00:00にする

common.js.coffee

$.datetimepicker.setLocale('ja')
 $ ->
  d = new Date(new Date().setHours(0, 0));
  d.setDate(d.getDate() + 4);
  #3日後=4日目の00:00以降
  $('.js-datetimepicker-three-days-later').datetimepicker(
    format: 'Y-m-d H:i:'
    minDate: d
    defaultDate: d
   # デフォルトが4日後の00:00になるようにする
  )

応用編

Lv.5 10時〜18時の時間帯のみ選択できるようにする

common.js.coffee

$('.js-datetimepicker').datetimepicker(
   allowTimes: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']
   #10時〜18時の間で選択できるようにする
  )

Lv.6 日曜日は選択できないようにする

common.js.coffee

$.datetimepicker.setLocale('ja')
$ ->
  $('.js-datetimepicker').datetimepicker(
   beforeShowDay: function(date) {
   if(date.getDay() == 0) { #0=日曜日、1=月曜日、2=火曜日....6=土曜日
   return [false];
   } 
   else {
   return [true];
  )