この記事は最終更新日から2年以上が経過しており、情報が古くなっている可能性があります。

フォームにカレンダーを設置するjQuery UI「Datepicker」の使い方です。


まずはjquery.min.jsとjquery-ui.min.js、jquery.ui.datepicker-ja.min.jsをheadに読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

次はCSSを設置します。jQuery UIは24種のテーマをjquery-ui.cssから呼び出す事が出来ます。
とりあえずはsmoothnessというテーマを利用してみます。

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

フォーム内にカレンダーを設置します。

<input type="text" class="datepicker" name="年月日" />

inputタグの後ろに設定を記述します。選択可能日を翌日から一年間にしています。

<script type="text/javascript">
$(function(){
         $(".datepicker").datepicker({
                 dateFormat: 'yy年mm月dd日' ,//日付の表示形式
                 minDate: '+1d', //最初の選択可能日
                 maxDate: '+1y'//最後の選択可能日
});
});
</script>