jQuery UI のDatepickerで入力フォームでお手軽にカレンダーから入力できる。
コードはこんな感じ
<!-- jQuery UI テーマをCDNから読み込み -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css">
<!-- jQuery, jQuery UI, jQuery UI Datepicker の 日本語化プラグイン をCDNから読み込み -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<script type="text/javascript">
$(function(){
var t_date = $("#datepiek_test").val();
$("#datepick_test").datepicker();
$("#datepick_test").datepicker("option", "showOn", 'both');
$("#datepick_test").datepicker("option", "dateFormat", 'yy/mm/dd');
$("#datepick_test").val(t_date); });
</script>
<input id="datepick_test" type="text" />
jQueryやjQuery UI を使う場合、CDNを用いる方法と、ダウンロードしてきて使う方法がある。
手っ取り早いのがCDNなので、上記のサンプルをまるっとコピペすれば動くはず。
しかし、自分のサイトに持っておきたい場合や、テーマをあり物でなくて色々とこだわりたい場合は、自分のところに落としてくる。
また、jQuery UI のテーマはその他のUIと共通なので、Datepickerしか使わなくても他のUI用のcssとかもダウンロードしてしまうので、用途に応じてダウンロードビルダーなるページが用意されている。
ちなみに、jQueryとjQuery UI のバージョンの親和性の問題がある。。
jQueryが古いバージョンでjQuery UI だけを最新にすると動作しないときがあるので、ご注意。