Datepicker
Datepickerは、カレンダー表示ができるjQuery UIの1つです。指定されたタグに、スクリプトを使ってウィジェットを組み込みます。Datepickerを使うと、例えばユーザ登録時における誕生日や登録日を入力する場合、視覚的にユーザ操作ができます。今回は、月、曜日、翌月、先月の移動ボタン部分を日本語表示させたカレンダーを表示してみましょう。
Datepickerのオプションを表3に示します。
表3 Datepickerのオプション
| オプション | 説明 |
| dayNames | 曜日名を指定する（通常の表記用） |
| dayNamesMin | 曜日名を指定する（短い表記用） |
| dayNamesShort | 曜日名を指定する（やや短い表記用） |
| monthNames | 月名を指定する（通常の表記用） |
| monthNamesShort | 月名を指定する（短い表記用） |
| nextText | 翌月移動ボタン名を指定する |
| prevText | 前月移動ボタン名を指定する |
リスト2にDatepickerの使用例を、図3に実行結果を示します。
リスト2 Datepickerの使用例（jQueryUI_Datepicker.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Datepickerサンプル</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type="text/javascript">
<!--
//1．Datepickerの表示
$(function () {
$("#Datepickersample").datepicker({
dayNames: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
dayNamesShort: ["日曜", "月曜", "火曜", "水曜", "木曜", "金曜", "土曜"],
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月"],
nextText: "次",
prevText: "前"
});
});
//-->
</script>
</head>
<body>
<div id="Datepickersample">Datepickerサンプル</div>
</body>
</html>
図3 Datepickerの実行結果
Datepickerは$("#Datepickersample").datepicker()メソッドを使用します（1）。monthNamesおよびdayNamesMinオプションを使用して、月、曜日部分が日本語表示になっています。また、nextText,prevTextオプションにより、翌月、先月移動ボタンの表示も日本語になっています。
