jQuery ui 1.7.1 のDatePicker日本語化

k.nakamura — Sun, 17 May 2009 12:25:16 +0000

jQuery ui の DatePickerを日本語化するのメモ。

シンプルなコードで素敵なUIを利用できるjQueryのuiはなかなか優れもの。

よく使われそうなカレンダー（DatePicker）も簡単なコードで実装できます。

また、uiがデフォルトでi18n対応なのですが、2009年5月時点の最新版であるjQuery ui 1.7.1版の DatePickerは、そのままでは完全な日本語対応になっていないのでその訂正方法を書いておきます。

なお、jQueryそのものやDatePicker利用に必要な他のライブラリ等については、それぞれのサイトをご確認ください。ここには本家サイトのリンクのみ記載していますが、日本語の情報もたくさんあります。

なお、この日本語化の作業は「jQuery UI Datepickerで、日本語化＋α」を参考にさせていただきました。ありがとうございます。

デフォルトの（日本語化していない）状態のカレンダーはこんな感じ。

この状態で日付を入力すると「mm/dd/yyyy」になっちゃう。

で、デフォルトの日本語化作業。

デモ用のHTMLファイルに↓の１行を追加。

（jQuery ui DatePickerのデモでは、ローカライズのサンプルもついてきます）

「ui.datepicker-ja.js」を読みこむようにしたあとのカレンダーは

“年”がない。「20095月」となってしまう。

仕方がないのでコード修正。手順は次の通り。

これだけ。

1．の修正は↓。クリックで拡大。Keyは「yearSuffix」となってます。

2．の修正は全部で4カ所（で大丈夫だと思う）。

「ui.datepicker.js」の56行めあたりに1．で追加した「yearSuffix」を定義。（クリックで拡大）

前の行にカンマを忘れずに。

次に関数「_generateHTML」（1258行めあたり）で、yearSuffixの設定値を読み込む。（クリックで拡大）

「_generateHTML」の中で関数「_generateMonthYearHeader」を呼び出す引数にyearSuffixを追加（1353行あたり）。（クリックで拡大）

関数「_generateMonthYearHeader」に引数を追加（1422行あたり）。（クリックで拡大）

1424行めで引数を追加。引き渡される値を使って実際に表示するHTMLを組み立てているコード（1454行め）に文字列結合させる。

これでおしまい。もう１回、デモを実行すると….

この通り。「2009年５月」になってます。日付を選択するとちゃんと「yyyy/mm/dd」で入力できます。

いじょっ！

–

補足

上記の修正のみの場合、年月をリストボックス形式にした場合、年の表示に「年」がつかないと思われます。別の関数にも上記と同様に「yearSuffix」を結合する必要があります。

シンプルソフトの技術情報 » jQuery