[datepicker]日付の日本語化

datepickerは日付を入力するフォームに利用すると非常に便利なUIです。

ですが、デフォルトでは英語になってしまいます。日本語を使うにはどうしたらいいでしょうか？

ヘッダー

通常は以下のように読み込みます。

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/i18n/jquery.ui.datepicker-ja.js"></script>

ポイントはjquery.ui.datepicker-ja.jsとなります。これを読み込むことでUIが日本語化されます。
ファイルをローカルに置く場合、i18nファイルは以下のフォルダにおかれているものを使います。
jquery-ui-(バージョン).custom\development-bundle\ui\i18n

スクリプトとCSS

設置は以下を参考にしてください。

<style type="text/css">
    select.ui-datepicker-month,
    select.ui-datepicker-year {
        width:auto;
    }
</style>
$(function() {
    $("#datepicker").datepicker({
	changeMonth: true,
	changeYear: true,
	language: 'ja',
	dateFormat: 'yy-mm-dd'
    });
});

CSSを指定しているのは、カレンダー上部に年月のセレクトボックスを表示すると表示が崩れてしまうためです。

まとめ

スクリプトでdatepickerにパラメータで表示する形式を指定する方法もありますが、こちらの方がよりスマートだと思います。