JavaScript / jQuery / 備忘録

メールフォームや予約フォームなどで日付を入力する補助機能で、jQueryのdatepickerを利用している人も多いかと思います。

便利な機能ではありますが、選択させない日付がある場合はどのようにしてその部分のみを選択できないようにするかが意外と分かりづらかったので記録として残します。

まずはdatepickerを使用するための準備をします。

<script>
jQuery(function($){
  $.datepicker.regional['ja'] = {
    closeText: '閉じる',
    prevText: '<前',
    nextText: '次>',
    currentText: '今日',
    monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
    dayNamesShort: ['日','月','火','水','木','金','土'],
    dayNamesMin: ['日','月','火','水','木','金','土'],
    weekHeader: '週',
    dateFormat: 'yy/mm/dd',
    firstDay: 0,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: '年'
  };
  $.datepicker.setDefaults($.datepicker.regional['ja']);
});
</script>

 

次にどのフォームにdatepickerを使用するかの指定をします。

$("input[name='date']").datepicker({dateFormat: "yy/mm/dd"});

 

これでフォームをクリックしフォーカスあてるとdatepickerが表示すると思います。今度は選択させたくない部分を用意します。選択できなくなる部分はグレーアウトに変化します。

 

曜日選択の場合

$("input[name='date']").datepicker('option','beforeShowDay',function(date){
  var ret = [(date.getDay() != 0 && date.getDay() != 3 && date.getDay() != 4 && date.getDay() != 5 && date.getDay() != 6)];
  return ret;
});

 

どうやら1カ月のカレンダー表示するたびにその月の日数分ループするようなので、1日毎に確認できるようになっています。

その為、dateを何かしらの形式に変換して比較し、選択可能か不可能かの判断をreturnすれば良いようです。

返す値は配列式で返すようでした。

 

return [false, '']; // 選択不可
return [true, '']; // 選択可

 

曜日は月曜や火曜とかの名称ではなく、0から6までの数値で判断しています。0は日曜で6が土曜、1と2であればtrueにしているので、月曜と火曜は選択可能となります。

 

日付指定の場合（年末年始や祝日など）

$("input[name='date']").datepicker('option','beforeShowDay',function(date){
  var yymmdd = $.datepicker.formatDate('yy-mm-dd', date);
  var ret = [yymmdd != '2021-12-29' && yymmdd != '2021-12-30' && yymmdd != '2021-12-31'];
  return ret;
});

ネットで調べるとgetTimeで比較する方法もありましたが、基準となる日付を文字にすると文字比較でいけるようです。しっかりとした構築をするならgetTimeなどで比較するほうが安全だと思います。