Datepicker for Bootstrapで指定日を無効にする

ウェブサービスを作る際に必要になるDate picker。カレンダーが出てきて日付を選べるやつです。
jQuery UIにもあるのですが、twitter bootstrapを使ってる人はjQuery UIのデザインが許せないこともあるかと思います。そんな時にDatepicker for Bootstrapを見つけ出すかと。
jQuery UIのほうが機能的には凄いので、どっちがいいとは言えませんが、見た目を何とかして！という人はDatepicker for Bootstrapがいいかも。

2つのバージョン

まず、こっちじゃないです。
http://www.eyecon.ro/bootstrap-datepicker/
こちらは開発が止まっている様子。デフォルトが変な日付だったりするから微妙。

でこっちが良い感じの方。
http://vitalets.github.com/bootstrap-datepicker/
gitHubもあるよ。
https://github.com/vitalets/bootstrap-datepicker

基本的な使い方は簡単なので、省略。

指定日を選択できなくする

いい感じのデザインだけど、特定の日付を無効にできないんですよね。予約機能とかに必須だと思うんだけど、まぁ機能がないなら改造するかっていうことで。
こんな感じ。
29、30、31日を無効にします。
選択可能だけど、選択すると値が消えて、エラーがでるようにします。
そもそも選択できないほうがスマートだな。とも思ったりもします。が、ちょっとそれは置いといて。。。

1
2
3
4
5
6
7
8
9
10
    $('#day-start').bind('input keyup',function(){
        var input_date = $(this).val();
        //タイプされた文字列に29,30,31があるか判別
        if (input_date.indexOf("29")!==-1 || input_date.indexOf("30")!==-1 || input_date.indexOf("31")!==-1) {
            $('.alert').show(); //エラー表示（あらかじめ<div class="alert">エラー！</div>みたいなのを設置しておいてください。）
            $('#day-start').val('');　//入力された値が消えます。       
            $('div.datepicker.dropdown-menu').hide(); //カレンダーを非表示に。
        }
    });
    </script>

タイミング的には29日の入力も不可能じゃない？
まぁまぁ。ひとまずこれでやってみた。