jQuery UI Datepickerプラグインでカレンダーを表示
header要素にlink要素とscript要素を組み込む。
1 |
<link href="base.css" rel="stylesheet" type="text/css" /> |
2 |
<link href="jquery-ui/css/ui-darkness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" /> |
3 |
<script src="jquery-ui/js/jquery-1.3.2.min.js" type="text/javascript"></script> |
4 |
<script src="jquery-ui/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> |
id=txtDateで要素を追加
1 |
<h3>jQuery UIのdatePicekerプラグインを利用したデモ（英語版）</h3> |
2 |
<input id="txtDate" type="text" /> |
3 |
<p>テキストボックスをクリックするとカレンダーが表示されます。</p> |
jQuery UI Datepickerプラグインを組み込む
1 |
<script type="text/javascript"> |
3 |
$('#txtDate').datepicker(); |
ブラウザで表示
カレンダーから日付を選択したときテキストボックスには「mm/dd/yyyy」の形式で表示されます。
jQuery UI Datepickerプラグインを日本語にローカライズする
「development-bundle」フォルダー内の「ui/i18n/ui.datepicker-ja.js」を組み込みます。
1 |
<script src="jquery-ui/development-bundle/ui/i18n/ui.datepicker-ja.js" type="text/javascript"></script> |
を追加します。
ブラウザで表示
カレンダーから日付を選択したときテキストボックスには「yyyy/mm/dd」の形式で表示されます。
しかし、カレンダーの日付が「200912月」のように「年」が表示されなためカスタマイズが必要です。
02 |
$.datepicker.regional['ja'] = { |
07 |
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', |
08 |
'7月', '8月', '9月', '10月', '11月', '12月'], |
09 |
monthNamesShort: ['1月','2月','3月','4月','5月','6月', |
10 |
'7月','8月','9月','10月','11月','12月'], |
11 |
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'], |
12 |
dayNamesShort: ['日','月','火','水','木','金','土'], |
13 |
dayNamesMin: ['日','月','火','水','木','金','土'], |
14 |
dateFormat: 'yy/mm/dd', firstDay: 0, |
16 |
showMonthAfterYear: true}; |
17 |
$.datepicker.setDefaults($.datepicker.regional['ja']); |
の「’1月’」の部分を「’年 1月’」に修正し「ui.datepicker2-ja.js」として保存します。
反映したものが以下のようになります。
