jQuery UI datepickerを日本語化したりカスタマイズしたり

前回に引き続きjQuery UIのdatepickerです。
やはりデフォルトのままだと色々不便があります。
前回はカラー(テーマ)のカスタマイズを紹介しました。

jQuery UIの導入方法と色を変えるためのカスタマイズ - メン醤のjQuery workshop

日本語化

公式のGitHubリポジトリよりdatepicker-ja.jsをDLします。
(Rawと書いてあるボタンをクリックするとこのファイルだけ取得できます)

https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-ja.js

jsのjquery-uiディレクトリなどに置いてscriptタグで読み込ませます。

カレンダーの表示位置

カレンダーの表示位置はデフォルトで自動計算になっていますが、
テキストボックスの配置がウィンドウの下限に近い場合に
自動で上部に表示してくれますが、
特にBootstrapの固定ヘッダなどがある場合など
ヘッダの下に回り込んでしまうことがあります。

これは良くない…！
そんな場合はカレンダーの表示位置を下になるように固定しちゃいましょう！
beforeShowの所がその処理です。
表示位置をテキストボックスの左下になるように計算します。

カレンダーは下に表示され、スクロールバーが出ます。

効率よく初期化

1画面上に複数のdatepickerを使用する場合、
1つ1つのidをセレクタで取って.datepicker()を呼びがちですが
classセレクタでまとめて初期化するのが効率が良いです。

<input type="text" id="target_date1" class="form-control this-is-datepicker" />
<input type="text" id="target_date2" class="form-control this-is-datepicker" />
<input type="text" id="target_date3" class="form-control this-is-datepicker" />

このような複数のinputに

$(document).ready(function($) {
  // 一気に初期化する.
  $('.this-is-datepicker').datepicker();
});

で一気に初期化することができます。