カレンダーから日付を入力する方法 - nicepaper @ ウィキ

フォームを作る際に日付をカレンダーから選ぶことが出来れば便利ですね。
今回は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">

を付与すれば完成です。

以上