jQuery datepicker・flatpickrのオプション設定を動的に変える方法

こんにちは。菜笑[なえ]です。
今回は「jQuery datepicker・flatpickrのオプション設定を動的に変える方法」という内容で書いていきます。

事象

セレクトボックス の内容と連携して、datepickerflatpickrのオプション設定を変える方法です。
同じ方法で対応できるかと思いきや、そうでもなかったです。

datepicker

初期設定

$('.datepicker').datepicker({
 dateFormat: 'yy-mm-dd',
 minDate: '+1d'
});
  • 選択範囲の最小日: 翌日
  • 日付の形式: 2019/01/01

として設定できます。

動的に変更

$(".selectbox").on('change', function(){
  var date = new Date(2019, 6 - 1, 1);
  $(".shop_select .datepicker").datepicker( "option", "minDate", date );
});

選択範囲の最小日を2019年6月1日に変更することができました。

flatpickr

初期設定

var nowDate = new Date();
var nextDate = now.setDate(now.getDate() + 1);
var defaultDate = new Date(1990, 1 - 1, 1);
flatpickr(".flatpickr", {
  dateFormat: "Y/m/d",
  minDate: nextDate,
  defaultDate: defaultDate
});
  • 日付の形式: 2019/01/01
  • 選択範囲の最小日: 翌日
  • 初期選択の日付: 1900/01/01

として設定できます。

動的に変更

$(".selectbox").on('change', function(){
  var minDate = new Date('2019-01-01');
  flatpickr("#calendar", {
    dateFormat: "Y/m/d",
    minDate: minDate,
    defaultDate: minDate
  });
});
  • 選択範囲の最小日: 2019/01/01
  • 初期選択の日付: 2019/01/01

に変更することができました。

flatpickrは、datepickerのように指定したものだけを変更する
ということができなかったので、設定を全て上書きして変更しました。

なので、変更しないオプションも設定しておかないと、動的に変更しときに設定が消えてしまうので要注意です。

以下のようにしてしまうと、dateFormat の設定が効かなくなります。

$(".selectbox").on('change', function(){
  var minDate = new Date('2019-01-01');
  flatpickr("#calendar", {
    minDate: minDate,
    defaultDate: minDate
  });
});

おわりに

datepickerは変更したい値だけを変えることができるのは、コードが短くなるのでありがたいですね。

もしかしたらflatpickrも同じように出来るかもしれませんが。。
わかる方がいれば教えていただけると嬉しいです!

参考文献

ありがとうございます!

SNS

Twitter:@nae310_
Instagram:310nae