Help us understand the problem. What is going on with this article?

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

背景

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

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

前提

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

実装方法

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

<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: '&#x3C;前',
        nextText: '次&#x3E;',
        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になります。
ちなみに第2引数クラス名を指定できるので、クラス名指定してcssでデザイン定義すれば、背景色を変更したりできます。第3引数については、フォーカスされた際にポップアップで表示するラベルを指定できます。第2、第3引数については不要であれば空文字を渡しておけばOKです。

        beforeShowDay : function(date) {
            var disableDate = $.datepicker.formatDate(dateFormat, date);
            return [( disableDates.indexOf(disableDate) == -1 ), "", "非営業日"];
        }
mnrck07
PHP,javascript,swift,Rubyあたりがテリトリー。 趣味は欅坂46。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away