form カレンダー 土日祝日選択できないようにする

[jungissei]

デジタル庁のAPIなど利用？

[jungissei]

$(function () {

  let $calendar = $('.form_calendar');

  if ($calendar.length > 0) {

    // yyyy-mm-dd
    function YMD( d ){
      let Y = d.getFullYear();
      let M = d.getMonth() + 1;
      let D = d.getDate();
      return [Y, ('0' + M).slice(-2), ('0' + D).slice(-2)].join('-');
    }

    // 祝日取得
    $.get('https://holidays-jp.github.io/api/v1/date.json', function( holidays ){

      $calendar.flatpickr({
        dateFormat : 'Y年m月d日',
        locale : 'ja',
        disableMobile : true,
        onDayCreate: function(dObj, dStr, fp, dayElem){

          // 土日祝無効・クラス付与
          let dayOfWeek = dayElem.dateObj.getDay();
          switch( dayOfWeek ){
            case 0: $(dayElem).addClass('flatpickr-disabled sunday'); break;
            case 6: $(dayElem).addClass('flatpickr-disabled saturday'); break;
          }

          let ymd = YMD(dayElem.dateObj);
          if( ymd in holidays ) $(dayElem).addClass('flatpickr-disabled jp-holiday');
        },
        onChange: function(selectedDates, dateStr, instance) {
          if (selectedDates.length > 0) {
            let selectedDate = selectedDates[0]; // 選択された最初の日付
            let month = selectedDate.getMonth() + 1; // 月を取得（0から始まるため+1）
            let day = selectedDate.getDate(); // 日を取得

            $('input[name="' + $(instance.input).data('month-name') + '"]').val(month);
            $('input[name="' + $(instance.input).data('day-name') + '"]').val(day);
          }
        }
      });

    });
  }
});