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日を無効にします。
選択可能だけど、選択すると値が消えて、エラーがでるようにします。
そもそも選択できないほうがスマートだな。とも思ったりもします。が、ちょっとそれは置いといて。。。

    $('#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日の入力も不可能じゃない?
まぁまぁ。ひとまずこれでやってみた。

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた