pikaday.jsに休業日を設定し選択不可とする

2024年9月19日 14:30

クライアントで使用していたpikaday.jsに、休業日を設定したいというご依頼をいただいたので対応しました。

全体

//平日と週末で営業時間（選択肢）を分ける
var weekday = '<option value="">---</option><option value="12:00">12:00</option><option value="13:00">13:00</option><option value="14:00">14:00</option><option value="15:00">15:00</option>';
var weekend = '<option value="">---</option><option value="15:00">15:00</option><option value="16:00">16:00</option><option value="17:00">17:00</option>';

//休業日の設定
var validDateArray = ["2024-12-28", "2024-12-31", "2025-01-01", "2025-01-02", "2025-01-03", "2025-01-04"];

//validDateArrayに該当するとtrueを返す
function isDateInArray(date, array) {
  return array.some(function(d) {
    return moment(d).isSame(date, 'day');
  });
}

var select = document.getElementById('select');

var pika = new Pikaday({
  field: document.getElementById('pika'),
  firstDay: 1,
  minDate: moment().add(1, 'days').toDate(),
  maxDate: new Date('2030-12-31'),
  yearRange: [2020,2030],
  format: 'YYYY年MM月DD日(ddd)',
  position: "bottom left",
  i18n: {
    previousMonth : '前の月',
    nextMonth     : '次の月',
    months        : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
    weekdays      : ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
    weekdaysShort : ['日','月','火','水','木','金','土']
  },
  //休業日は選択不可にする
  disableDayFn: function(date){
    return (date.getDay() === 0 || date.getDay() === 1 || isDateInArray(date, validDateArray));
  },
  onSelect: function(date) {
    if(date.getDay() === 6) {
      select.innerHTML = weekend
    } else if (date.getDay() !== 6) {
      select.innerHTML = weekday
    }
  }
});

今回追加した箇所

休業日の設定

validDateArrayという配列に、今後の休業日を設定するようにしました。

//休業日の設定
var validDateArray = ["2024-12-28", "2024-12-31", "2025-01-01", "2025-01-02", "2025-01-03", "2025-01-04"];

休業日ならtrueを返す関数

dateが指定した休業日の場合、trueを返す関数を作成しました。

//validDateArrayに該当するとtrueを返す
function isDateInArray(date, array) {
  return array.some(function(d) {
    return moment(d).isSame(date, 'day');
  });
}

disableDayFnに追加

disableDayFnは、pikaday.jsで選択不可の日付を指定するオプションなので、ここに上記のisDateInArrayとvalidDateArrayを入れます。

なお、こちらのクライアントでは、日曜(0)と月曜(1)が休業日なのでそちらも入れてあります。

//休業日は選択不可にする
disableDayFn: function(date){
  return (date.getDay() === 0 || date.getDay() === 1 || isDateInArray(date, validDateArray));
},

以上で、完了です。