jQuery ui Datepickerでカレンダー入力の変更点

追加された行はこの色です。
削除された行はこの色です。
jQuery ui Datepickerでカレンダー入力へ行く。

[[Javascript]]

*説明 [#cebfd1c1]
フォームにカレンダーを表示させたいけど、input type dateではIEとかでは表示されないので使えない場合、jqueryのdatepickerというライブラリ？を使用すれば、簡単にデザイン性が高くIEでも表示可能なカレンダーが作成できます。

*使用方法 [#j0a73b03]
+http://jquery.com/download/からjqueryをダウンロード
+あとは下記パスをソースに記述

 <script src="js/jquery-1.11.3.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
 <link rel="stylesheet" href="js/jquery-ui.css" >
 <script>
 $(function() {
  $("#datepicker").datepicker( { minDate: '+7d'} );   <--７日後以降を指定させる場合yとかでも指定可能
  $("#datepicker").datepicker("option", "buttonImageOnly", true);
 });
 </script>

***フォームで使用する箇所 [#qfa8c37a]
 <input type="text" id="datepicker" name="hogehoge">

参考サイト：http://www.webdesign-fan.com/jquery-ui-datepicker

jQuery ui Datepickerでカレンダー入力 の変更点

jQuery ui Datepickerでカレンダー入力の変更点