jQuery UI 1.11以降でのdatepickerの日本語表示

しばらく目を離した隙にjQuery UIのバージョン1.11系がリリースされていたので1.10系からバージョンアップを図ろうとしたのですが、datepickerで日本語表示するために読み込んでいた言語別ファイル「jquery.ui.datepicker-ja.js」(あるいは jquery.ui.datepicker-ja.min.js)が1.11系には見当たりません。

Changelogを眺めてみると1.11よりファイル名が変わったりしているようなので、以下のいずれかの対応が必要になります。

ファイル名を変更する

1.11より「jquery.ui.datepicker-ja.js」は「datepicker-ja.js」へとファイル名が変更されているので、それにあわせて呼び出し元を変更すればOK。

<!--
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet" />
-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/datepicker-ja.min.js"></script>
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/south-street/jquery-ui.css" rel="stylesheet" />

統合言語ファイルを使用する

言語別ファイルとは別に対応言語をひとまとめにした「jquery-ui-i18n.js」(あるいは jquery-ui-i18n.min.js)を利用するよう修正を行います。こちらは伴い若干のソース修正が必要になります。

<!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" xml:lang="ja" lang="ja">
<head>
  <meta http-equiv="Content-Language" content="ja" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>jQuery UI datepicker: サンプル</title>

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!--
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery.ui.datepicker-ja.min.js"></script>
  <link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet" />
  -->
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
  <link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/south-street/jquery-ui.css" rel="stylesheet" />

  <script>
  $(function() {
    /* 修正前
    $('.datepicker').datepicker({
      showOn: "both",
      buttonText: "...",
      regional: 'ja'
    });*/

    /* 修正後 */
    $.datepicker.setDefaults($.datepicker.regional["ja"]);
    $('.datepicker').datepicker({
      showOn: "both",
      buttonText: "..."
    });
  });
  </script>
</head>

<body>
  <h1>jQuery UI datepicker: サンプル</h1>
  <form>日付選択:<input type="text" class="datepicker"/></form>
</body>
</html>

言語別ファイルは将来的に再度ファイル名が変わったり削除されることも考えられるので、先のことを考えれば後者の対応を行っておいた方が良いような気がします。

    この記事へのコメント

    メールアドレスが公開されることはありません。

    頂戴したコメントは管理者に承認されるまで表示されません。