DatePickerで特定日付をdisableにしたい

背景

プロジェクトにてカレンダーの日付選択で非営業日を選択させたくないという要件があり、久しぶりにフロント周りを調査したので、メモとして残しておく

下記サンプルを実装したので、そちらを元にメモを書きます。
http://jsdo.it/Yoshinari.Kazuhisa/MXUR

前提

jQuery DatepickerのDatePickerは利用したことがある

実装方法

html部分はシンプルに期間を入力させるフォーム２つを表示としました。

<form name="myForm" class="form-horizontal" method="post" novalidate>
    <div class="form-group">
        <label class="col-md-2 control-label">日付：</label>
        <div class="col-md-10">
            <input type="text" class="form-control date dateFrom" />
            ～
            <input type="text" class="form-control date dateTo" />
        </div>
    </div>
</form>

下記がjsになります。(一部配列の中身を省略したりしています。)

$(function () {
  /* 
   * 祝日・非営業日の定義
   * "yyyy/mm/dd"
   */
   var dateFormat   = 'yy/mm/dd';
   var disableDates = [
    "2016/01/01",
    "2016/01/02",
    "2016/01/09",
    "2016/02/11",
    "2016/03/20",
    "2016/09/22",
    "2016/10/08",
    "2016/10/31",
    "2016/11/03",
    "2016/11/23",
    "2016/12/23",
    "2016/12/24"
   ];
    
   var opt = {
     timeOnlyTitle: '時間を選択',
     timeText: '時間',
        hourText: '時',
        minuteText: '分',
        secondText: '秒',
        millisecText: 'ミリ秒',
        timezoneText: 'タイムゾーン',
        currentText: '現在時刻',
        closeText: '閉じる',
        timeFormat: 'HH:mm',
        amNames: ['午前', 'AM', 'A'],
        pmNames: ['午後', 'PM', 'P'],
        isRTL: false,
        prevText: '<前',
        nextText: '次>',
        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,
        showMonthAfterYear: true,
        yearSuffix: '年',

        changeMonth: true,
        changeYear: true,
        yearRange: 'c-80:c+80',
        beforeShowDay : function(date) {
            var disableDate = $.datepicker.formatDate(dateFormat, date);
            return [( disableDates.indexOf(disableDate) == -1 ), "", "非営業日"];
        }
    };
    var dates = $('.date').datepicker(opt);
    $('.date').datepicker('option', {
        onSelect: function (selectedDate) {
            var option = $(this).hasClass('dateFrom') ? 'minDate' : 'maxDate',
                instance = $(this).data('datepicker'),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings);
            dates.not(this).datepicker('option', option, date);
        }
    });
});

どこぞからサンプルを参考に追記したので、今回の処理に不要な部分も多分に含みますが重要なところは下記になります。
beforeShowDayはカレンダー表示される際に日付分呼ばれる関数になります。ここで非営業日として用意した配列と比較して、[false, "", ""]の形で値を返すとdisableになります。
ちなみに第２引数はクラス名を指定できるので、クラス名指定してcssでデザイン定義すれば、背景色を変更したりできます。第３引数については、フォーカスされた際にポップアップで表示するラベルを指定できます。第2、第3引数については不要であれば空文字を渡しておけばOKです。

        beforeShowDay : function(date) {
            var disableDate = $.datepicker.formatDate(dateFormat, date);
            return [( disableDates.indexOf(disableDate) == -1 ), "", "非営業日"];
        }