UIのカレンダーのデザインが気に食わなくて、bootstrap-datepickerを使う人が多い気がします。UIは機能が凄いからいいけどね。データピッカーなんですが、ちょっとソースがいろいろあって混乱してしまうので整理します。Petrehttp://www.eyecon.ro/bootstrap-datepicker/↓vitaletshttps://github.com/vitalets/bootstrap-datepicker↓eternicodehttps://github.com/eternicode/bootstrap-datepicker多分こんな流れです。eternicodeのオンラインデモは分かりやすくていい。期間を指定させる単一の日付けではなくて、○月○日〜○月○日といった感じ。やり方はいろいろあるだろうけど、こんな感じで。From:とTo:のテキストフィールドを2つ。カレンダーを選択することでしか入力を受け付けない。From:で日付を選択したら、自動的にTo:のカレンダーが表示される。To:ではFrom:で選択された日付以前は選択できないようにする。pickerのバグをCSSでカバーする。readonlyをつけて、タイピングによる入力はうけつけません。type="text"こんな感じでデータピッカーを有効に。});});各種メソッドの使用と、おまけの機能From:の日付が変更されたら(changeDate)、To:のカレンダーを表示(show)してます。function(e){$('.datepicker2').datepicker('show');その日付以前を無効化するには、setStartDateメソッドです。sd);ついでなので、From:の○日前から選択不可にするという機能もつけてみた。From:の○日後でも大丈夫です。数字を入れると1日後とか1日前とか設定できる。ここではFrom:で選んだ日からTo:でも選択できるようにするので0のままで。日付ではなく期間を指定させるので、特定の日がハイライトされているとユーザーを混乱させてしまうかもしれません。指定すると、選択された日付がハイライトされないはずなんですが、バグがあって、ハイライトされてしまいます。javascriptを直すって手もありますが、横着してCSSを上書きしちゃいます。}</style>disableが分かりにくかったので少し修正デフォルトでは、選択できる日付とできない日付の違いが分かりにくかったので、調節しました。workabroad.jp。