カレンダーを表示して日付を入力できる jQuery UI の Datepicker をご紹介します。
jQuery UI の Datepicker プラグイン を利用することで、簡単にカレンダー入力を実装することができます。
まず、jQuery UI 利用時に必要なライブラリを読み込見ましょう。
jQuery UI のダウンロードサイトからファイルを取得して利用ください。
・jQuery の Javascript ファイル
・jQuery UI の Javascript ファイル
・jQuery UI のスタイルシートファイル
↑この3つのファイルが必要です！
次に、jQuery UI でカレンダー表示による日付入力を実装する前に、Datepicker の年月日、曜日を
日本語にローカライズします。
Datepicker を利用する場合は日本語表記にするため、更に日本語化用のファイルを読込む必要があります。
ver.1.11 以降はダウンロードファイル内に Datepicker をローカライズするスクリプトファイルが含まれなくなってしまいました。
この Javascript のファイルの中身を直接ソースに書いてしまえば、日本語にローカライズできます。
<script type="text/javascript">jQuery(function($) {
$("#calender").datepicker( { changeYear: true,changeMonth: true } );
// 日本語化
$.datepicker.regional['ja'] = {
closeText: '閉じる',
prevText: '前の月',
nextText: '次の月',
currentText: '今日',
monthNames: ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'],
monthNamesShort: ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'],
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
dayNamesMin: ['日','月','火','水','木','金','土'],
weekHeader: '週',
dateFormat: 'yy/mm/dd',
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'};
$.datepicker.setDefaults($.datepicker.regional['ja']);
});</script>
<h1>カレンダー表示による日付入力のサンプル</h1> <p>日付 <input type="text" id="calender" /></p> <p>↑ こちらのテキストボックスをクリックしてください。カレンダーが立ち上がります。</p>
今回、参考にさせていただいたのは、
『初心者のための jQuery や Javascript の実装サンプルを紹介』さんです。
ありがとうございます。
