2010年7月5日月曜日

jQuery UIの Datepickerで日本語のカレンダーを表示する方法

（2010/07/05追記：年月選択のオプションと、その見た目の調整のCSSを追加した。）
（2013/05/01変更：CSSがmin対応したので変更した。）

必要なJavaScriptとCSSは、全てGoogleがホスティングしてくれてた。
（2010/10/12追記：日本の祝日を表示するGCalendar HolidaysだけはGoogleはホスティングしていない。）


サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Datepicker</title>

<!-- jQuery UIのCSSファイルの読み込み -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.min.css" />

<!-- 見た目の調整 -->
<style>
.ui-datepicker td span, .ui-datepicker td a {
    text-align: center;    /* 日付はセンタリングの方が好き */
}
/* 2011/4/25 削除 （土日の背景色はGClendar Holidaysが付けてくれる）
.ui-datepicker-week-end .ui-state-default {    / * 土日の背景を変える * /
    background-image: none;
    background-color: #b4ebfa;
}*/
.ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month {
    width: auto;    /* そのままだと改行してしまう */
}
.ui-datepicker select.ui-datepicker-month {
    margin-left: 1em;    /* ちょっと離すほうが好き */
}
</style>

</head>
<body>

<input id="test" type="text" />


<!-- JavaScriptファイルの読み込み -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<!-- 日本語カレンダーを表示するにはこれも要る -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

<!-- こちらなら日本だけでなく全てのローカライズができるが、ファイルサイズが大きい
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery-ui-i18n.min.js"></script>
-->

<!-- 2010/10/12追記：日本の祝日も表示 -->
<script src="gcalendar-holidays.js"></script>

<script>
$(function() {
    //テキストボックスにカレンダーをバインドする（パラメータは必要に応じて）
    $("#test").datepicker({
        //regional: "ja",    //日本語化 （2011/4/25 削除、要らなくなったみたい）
        showButtonPanel: true,    //「今日」「閉じる」ボタンを表示する
        firstDay: 1,    //週の先頭を月曜日にする（デフォルトは日曜日）
      
        //年月をドロップダウンリストから選択できるようにする場合
        changeYear: true,
        changeMonth: true,
      
        //選択可能な日付の範囲を限定する場合（月は0～11）
        minDate: new Date(2010, 6 - 1, 16),
        maxDate: new Date(2010, 8 - 1, 15)
    });
});
</script>

</body>
</html>

jQuery UIのテーマ（外観のデザイン）はjQuery UI - ThemeRollerで見られる。


Datepickerのローカライズ用ファイルは、Google AJAX Libraries APIがjQuery UI on Google Codeと同じディレクトリ構成だったので見つけられた。（余談だがi18nディレクトリには今のところDatepickerのローカライズ用ファイルしか無いようだ。）
Google Codeの方には最小化されたファイル（xxx.min.js）は無かったが、AJAX Libraries APIの方にはあった。（ローカライズ用JSファイルは最小化してもそれほどファイルサイズが小さくならないけど。）CSSはminは無いようだ。
ちなみにjQuery UI本家のDatepickerのデモでもGoogle AJAX Libraries API（きちんとmin.jsの方）のを使っていた。


Google AJAX Libraries APIを使う場合にバージョンアップで突如使えなくなるのを回避したいなら、jQueryとjQuery UIのバージョンはリビジョンまでしっかり指定しておいた方が無難。


（2010/08/19追記）
GCalendar Holidaysを使えば、Datepickerのカレンダー上に日本の祝日を表示できる。（2011/4/25 さらに追記：土日の背景色も表示してくれる。）
サンプル：GCalendar HolidaysでjQuery UI Datepickerに祝日を表示するのサンプル - ゼロと無限の間に
（追記終わり）


参考

tags: , , , , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)

ブログ アーカイブ

tags