jQuery UIのウィジェットを使ってみよう

jQuery UI／プラグインの活用（2）

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オプションにより、翌月、先月移動ボタンの表示も日本語になっています。