jQueryを使うことで、inputのtextで日付入力をしたい場合に簡単にカレンダー入力にすることができます。
スタイルシートでカレンダーの表示を変更できます。
スタイルシートを使用しなくても標準のフォーマットで表示されます。
jquery.jsとjquery-ui.jsを読み込ませます。カレンダーを日本語対応にするためにjquery.ui.datepicker-ja.jsを読み込みます。
datepickerでパラメータを設定すれば完成です。
スタイルシートとJavaScript
<style type="text/css">
.ui-datepicker{width: 300px; text-align: center; background: #99CCFF; margin: 0 0 10px 0;}
.ui-datepicker a{color: #000000;}
.ui-datepicker a:hover{color: #0000FF;font-weight:bold;}
.ui-datepicker-calendar{width: 100%;}
.ui-datepicker-header {color: #000000;padding: 15px;text-transform: uppercase;letter-spacing: 3px;}
.ui-datepicker-calendar thead th{color: #000000; padding:10px;}
.ui-datepicker-calendar td span{display: block; padding:10px;}
.ui-datepicker-calendar td a{color: #000000; display: block; padding:10px;}
.ui-datepicker-title{clear: both;}
.ui-datepicker-prev{float: left;}
.ui-datepicker-next{float: right;}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.ui.datepicker-ja.js"></script>
<script>
jQuery( function() {
$.datepicker.setDefaults($.datepicker.regional['ja']);
jQuery( '#jquery-ui-datepicker' ) . datepicker({ dateFormat: 'yy/mm/dd' });
} );
</script>
inputにidでJavaScriptで定義しているIDを設定します。
この設定でinputのtextをクリックするとカレンダーが表示されます。
html
日付：<input type="text" name="hiduke" size="12">" id="jquery-ui-datepicker">
