Datepicker で日付の選択可否を設定する

jQuery UI の Datepicker は、デフォルトでは全ての日付が選択可能です。
これを例えば、土日は選択できないとか、月末は選択できないといったような、指定した日付だけを選択可能とするよう設定を行うことが出来ます。

設定方法

datapicker の beforeShowDay 指定を使います。
beforeShowDay で、カレンダーの日を表示する前にコールバックされる関数を指定することが出来ます。
このコールバック関数の中で、選択可否を判断し、設定します。

 $("#datepicker").datepicker( {
        beforeShowDay: function (day) {
            yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
            if ($.inArray(yymmdd, target_days) == -1) {
                return [false, ""];
            }
            else {
                return [true, ""];
            }
        }
 });

上記の判定で使っている target_days ですが、選択可能とする日を以下のように配列で定義します。

 var target_days = [
    '2012-08-01',
    '2012-08-02',
    '2012-08-03',
    '2012-08-04',
    '2012-08-05',
    '2012-08-06',
    '2012-08-07',
 ];

もちろん、選択不可とする日を定義して、if 文の判定を逆にしてもＯＫです。
また、ajax 等で取得したデータを元に判定するのも良いでしょう。

$.datepicker.formatDate() について

意外と JS の Date オブジェクトを文字列に整形するスマートな方法って無いですよね。
上記では、$.datepicker.formatDate() を使っていますが、これは https://github.com/jquery/jquery-ui/blob/master/ui/widgets/datepicker.js を見てみたところ使えそうだったので使ってみました。
が、情報が公開されているようには見えないので、今後は使えなくなる可能性もありますね。