「カレンダーから日付を入力する方法」の編集履歴（バックアップ）一覧はこちら

「カレンダーから日付を入力する方法」(2015/10/10 (土) 15:53:31) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

フォームを作る際に日付をカレンダーから選ぶことが出来れば便利ですね。~
今回はjQueryを利用してカレンダーから日付を選択出来るようにしたいと思います。~
*jQueryを導入する
まずはjQueryを使えるようにします。~
今回は最も簡単な方法を使います。~
htmlのhead内に以下のコードを記述します。
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
これでファイルを置かなくてもjQueryを利用する事が可能になりました。
*jQuery UIを導入する
上と同じ要領で、head内に以下の記述をしてみます。~
 <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>
このコードを記述することで「jQuery UI」と「jQuery ui Datepicker」を導入することができます。
*カレンダーを選ぶ

*コードを書く

フォームを作る際に日付をカレンダーから選ぶことが出来れば便利ですね。~
今回はjQueryを利用してカレンダーから日付を選択出来るようにしたいと思います。~
*jQueryを導入する
まずはjQueryを使えるようにします。~
今回は最も簡単な方法を使います。~
htmlのhead内に以下のコードを記述します。
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
これでファイルを置かなくてもjQueryを利用する事が可能になりました。
*jQuery UIを導入する
上と同じ要領で、head内に以下の記述をしてみます。~
 <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>
このコードを記述することで「jQuery UI」と「jQuery ui Datepicker」を導入することができます。
*カレンダーを選ぶ
 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" >
を記述してから、~
http://jqueryui.com/themeroller/

にアクセス、gralleryから好きなものを選んで、上のコードのremondを変えます。~
*コードを書く
 <script>
   $(function() {
     $("#datepicker").datepicker();
   });
 </script>
をhead内に記述します。~
カレンダーを表示させたいテキストボックスに
 <input type="text" id="datepicker">
を付与すれば完成です。~

~
以上