カレンダー入力による当日予約の時間制御

天王寺区にあるM16はキックボクシ...

天王寺区にあるM16はキックボクシング&フィットネスに龍栄武館として子供向けのわんぱく空手もやっています 天王寺区のM16キックボクシング&フィットネスでは最短・最大効果のプログラムでプロトレーナーが心身共に理想のあなたに導きます！また龍栄武館として子供向けのわんぱく空...

作成2023/07/07

前提：フォームの予約のカレンダーにflatpickerを導入

導入Jquery「flatpickr@4.6.13」

参考：https://pa-tu.work/blog/flatpickr

課題：カレンダーの選択日付が当日の場合、予約時間<select>が現在時刻以前のものは選択不可に設定変更できるようにする。

参考：https://freelance-jak.com/technology/javascript/476/

参考：https://qox.jp/blog/flatpickr-trial/

HTML

<tr>
  <th>ご希望日<span class="must">必須</span></th>
  <td>
    <input type="text" id="js-datepicker" name="ご予約日" data-daymax="60" required="required" placeholder="〇〇年〇〇月〇〇日"></input>
  </select>
  </td>
</tr>
<tr>
  <th>ご希望時間<span class="must">必須</span></th>
  <td>
    <select id="reservation-time" name="ご希望時間" required="required">
    <option value="">ご希望の時間を選択してください</option>
    <option value="10:00-11:00">10:00-11:00</option>
    <option value="11:00-12:00">11:00-12:00</option>
    <option value="12:00-13:00">12:00-13:00</option>
    <option value="13:00-14:00">13:00-14:00</option>
    <option value="15:30-16:30">15:30-16:30</option>
    <option value="16:30-17:30">16:30-17:30</option>
    <option value="17:30-18:30">17:30-18:30</option>
    <option value="18:30-19:30">18:30-19:30</option>
    <option value="19:30-20:30">19:30-20:30</option>
    </select>
    <p class="reserve_tbl_caption">選択可能時間 10:00～14:00 / 15:30～20:30</p>
  </td>
</tr>

変更前のJS

//翌日の日時
let minDate = new Date();
minDate = minDate.setDate(minDate.getDate() + 1);
//今日から3ヶ月後の日時
let maxDate = new Date();
maxDate = maxDate.setMonth(maxDate.getMonth() + 2);
    flatpickr('#js-datepicker', {
    locale: 'ja',
    altInput: true,
  altFormat: 'Y年n月j日',
  dateFormat: 'Y-m-d',
  defaultDate : minDate,
  minDate     : minDate,
  maxDate     : maxDate
  });

変更後のJS

$(function() {
var days = new Date();
var year = days.getFullYear();
//月　後ろから２桁の文字取得することで、1月は01、12月は12月になるようする。
var month = ("0"+(days.getMonth() + 1)).slice(-2);
//日　後ろから２桁の文字取得することで、1日は01、31日は31になるようする。
var date =  ("0"+days.getDate()).slice(-2);
var today = year + "-" + month + "-" + date;//日付をフォーマット
var hours = days.getHours();//現在時間を取得
var num =  hours - 8;//現在の時間から-8を格納
var selectItem = document.getElementById("reservation-time");
//初期は当日なので、現在の時間までのserectを選択不可に
  if(hours < 14){
    for(var i=0; i<num; i++){
    selectItem.options[i].disabled = true;
    }
  }else{
    for(var i=0; i<num-1; i++){
    selectItem.options[i].disabled = true;
    }
  }
//フォームのご希望日カレンダー　flatpickr
let minDate = new Date();
minDate = minDate.setDate(minDate.getDate() + 0);
//今日から3ヶ月後の日時
let maxDate = new Date();
maxDate = maxDate.setMonth(maxDate.getMonth() + 2);
//現在の日付を取得
  flatpickr('#js-datepicker', {
  locale: 'ja',
  altInput: true,
  altFormat: 'Y年n月j日',
  dateFormat: 'Y-m-d',
  defaultDate : minDate,
  minDate     : minDate,
  maxDate     : maxDate,
  onChange: (selectedDates, dateStr, instance) => {//日時を変更したら発火
    if( dateStr !== today ){//当日でなければ
        for(var i=0; i<10; i++){//selectを選択可能に変更
        selectItem.options[i].disabled = false;
        }
      }else if(hours < 14){
        for(var i=0; i<num; i++){
          selectItem.options[i].disabled = true;
          }      
      }else{
        for(var i=0; i<num-1; i++){
          selectItem.options[i].disabled = true;
          }      
      }
    }
  });
});

解説

var days = new Date();
var year = days.getFullYear();
//月　後ろから２桁の文字取得することで、1月は01、12月は12月になるようする。
var month = ("0"+(days.getMonth() + 1)).slice(-2);
//日　後ろから２桁の文字取得することで、1日は01、31日は31になるようする。
var date =  ("0"+days.getDate()).slice(-2);
var today = year + "-" + month + "-" + date;//日付をフォーマット
var hours = days.getHours();//現在時間を取得
var num =  hours - 8;//現在の時間から-8を格納

１.現在の時間を取得し、[today]にカレンダーの選択日付とフォーマットをそろえたものを格納

２.[num]には現在時間から、予約時間（selectの中のoption）を入力不可にする数を格納

var selectItem = document.getElementById("reservation-time");
//初期は当日なので、現在の時間までのserectを選択不可に
  if(hours < 14){
    for(var i=0; i<num; i++){
    selectItem.options[i].disabled = true;
    }
  }else{
    for(var i=0; i<num-1; i++){
    selectItem.options[i].disabled = true;
    }
  }

3.カレンダーの初期値が当日なので、予約時間（selectの中のoption）にdisabled を付与して選択不可能に

4.14時～15時の項目がないため、数がずれるので、ifで分岐させて、14時以降なら[num]を更に-1させている

  onChange: (selectedDates, dateStr, instance) => {//日時を変更したら発火
    if( dateStr !== today ){//当日でなければ
        for(var i=0; i<10; i++){//selectを選択可能に変更
        selectItem.options[i].disabled = false;
        }
      }

5. onChangeでカレンダーの日時が変更されたらイベントを発火
6. カレンダーの入力日時が、先ほどフォーマットをそろえた現在の日時と一致するかを判定し、一致しない場合は、選択不可（disabled）を解除している。
7. 当日を選択した場合には、3と同じコードを処理