こんにちは。菜笑[なえ]です。
今回は「jQuery datepicker・flatpickrのオプション設定を動的に変える方法」という内容で書いていきます。
目次
事象
セレクトボックス の内容と連携して、datepicker・flatpickrのオプション設定を変える方法です。
同じ方法で対応できるかと思いきや、そうでもなかったです。
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も同じように出来るかもしれませんが。。
わかる方がいれば教えていただけると嬉しいです！
参考文献
ありがとうございます！
