datetimepickerのdefaultDateが設定できない時の対処法【日付の初期値】

実現したいこと

datetimepickerで
minDate, maxDate等を指定していると、それらのデータがデフォルトで入力されてしまう。

datetimepicker.rb

f.text_field :test, value: nil, label: true, id: datetimepicker

datetimepicker.js

$(function() {  
  $("#datetimepicker").datetimepicker({
    minDate: moment().subtract(1, 'months'), 
    maxDate: moment().add(6, "months")
  });
});

勝手にデータが入るのも嫌なのでdefaultではnilにしたい。

1日で二回datetimepickerの記事を書いているわけですが、そろそろdetetimepickerが嫌いになりそうなので、二度と同じことが起きないよう、備忘録として残しておきたいと思います。

初期値を設定するためにdefaultDateを使う

QiitaやTeratail、公式サイトなどを見てみると、どうやらdefaultDateを使えばいいらしいので以下のように設定してみた。

datetimepicker.rb

f.text_field :test, value: nil, label: true, id: datetimepicker

datetimepicker.js

$(function() {  
  $("#datetimepicker").datetimepicker({
    minDate: moment().subtract(1, 'months'), 
    maxDate: moment().add(6, "months")
    defaultDate: null
  });
});

しかし、入力欄には値が入ったままだ。

公式によると、、、

if input value is empty, calendar set date use defaultDate

どうやらinputフォームのvalueに何も入っていない場合にだけ適応されるらしい。
というわけでvalueをnilに変更。

datetimepicker.rb

f.text_field :test, value: nil, label: true, id: datetimepicker

が、formの初期値は一向に変わらない。。あるいはカレンダーすら表示されない。。
defaultDateが読み込まれていない？と感じたので以下のように実装。

datetiempicker.js

$(function() { 
  $("#release_datetimepicker").datetimepicker({
    defaultDate: null
  });

  $("#release_datetimepicker").datetimepicker({
    minDate: moment().subtract(1, 'months'), 
    maxDate: moment().add(6, "months"),
  });
});

やや冗長かもしれませんが、もう一個同じ操作対象を増やし、本来あったオプションの上に書いたら解決しました。

なお、以下のようにdefaultDateを後に指定すると読み込まれないので注意してください。

datetiempicker.js

$(function() { 
  $("#release_datetimepicker").datetimepicker({
    minDate: moment().subtract(1, 'months'), 
    maxDate: moment().add(6, "months"),
  });
　　　　$("#release_datetimepicker").datetimepicker({
    defaultDate: null
  });
});

まとめ

こんなことで1日費やしたけどなんとか思い通りにinputフォームの初期値を設定することができました。
datetimepicker、便利な反面よくわからない部分も多いです。。

参考:
teratail: https://teratail.com/questions/8914
公式: https://eonasdan.github.io/bootstrap-datetimepicker/
https://xdsoft.net/jqplugins/datetimepicker/