jQuery

jQuery UIのDatepicker（カレンダー）を日本語化する方法

2021年9月17日 by single コメントはまだありません

今回はDatepickerを日本語化する方法を紹介します。

jQuery UIのDatepicker（カレンダー）を日本語化する方法

サンプル

日付:

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Datepicker demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
   $( function() {
   $( "#datepicker" ).datepicker(
      {
          prevText: "前月"
         ,nextText: "次月"
         ,monthNames: [ "1月","2月","3月","4月","5月","6月"
            ,"7月","8月","9月","10月","11月","12月" ]
         ,monthNamesShort: [ "１月","２月","３月","４月","５月","６月"
            ,"７月","８月","９月","１０月","１１月","１２月" ]
         ,dayNames: [ "日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日" ]
         ,dayNamesShort: [ "日曜","月曜","火曜","水曜","木曜","金曜","土曜" ]
         ,dayNamesMin: [ "日","月","火","水","木","金","土" ]
         ,weekHeader: "周"
         ,showWeek :false
         ,dateFormat: "yy年Md日 D"
         ,firstDay: 0 /* 週の開始を日曜にする */
         ,isRTL: false
         ,showMonthAfterYear: true
         ,yearSuffix: "年"
         ,showButtonPanel: true
         ,closeText : "閉じる"
         ,currentText:"今日"
      }
   );
   } );
  </script>
</head>
<body>
   <p>日付: <input type="text" id="datepicker" size="30"></p>
</body>
</html>

デモ

Datepickerを日本語化するためのオプション設定

オプション

prevText

カレンダー上部の前月を表示するためのアイコンボタンの代替テキストラベル

nextText

カレンダー上部の次の月をを表示するためのアイコンボタンの代替テキストラベル

yearSuffix

オプション「changeYear」をtrueにした場合、カレンダー上部に表示される年リストの後ろに表示されるラベル定義。

monthNames

カレンダー上部に表示される月ラベルの定義

monthNamesShort

次ラベルの定義で、オプション「changeMonth」をtrueにした場合、カレンダー上部に表示される月リストに利用される文字列の定義。

または、オプション「dateFormat」にて『M』（月ラベルの短縮形）を指定した場合に設定される文字列の定義。

dayNames

カレンダーの曜日項目に設定される代替テキストで利用される文字列の定義。

また、オプション「dateFormat」にて『DD』（曜日）を指定した場合に設定される文字列の定義。

dayNamesShort

オプション「dateFormat」にて『D』（曜日ラベルの短縮形）を指定した場合に設定される文字列の定義。

dayNamesMin

カレンダー上部に表示される曜日ラベルの文字列定義。

showWeek

年開始から何週目かというsラベルを表示するか否かのオプション。デフォルトは「false」。

weekHeader

オプション「showWeek」がtrueの場合、設定されるヘッダの文字列の定義。

firstDay

週の開始を定義するオプション。０が日曜で、月曜が1、という感じになります。。デフォルトは0（日曜）です。

isRTL

カレンダー標記が“右から左”にするかどうかのオプションとなります。

日本語のカレンダーの場合は、“左から右”なので、falseでいいと思います。

デフォルトは「false」です。

「true」（右から左）にしたら以下のようになります。

showMonthAfterYear

ヘッダ部の「年月」標記を「月年」にするかどうかのオプションとなります。デフォルトは「false」で『月年』標記です。日本語の場合は、たいてい「年月」なので、「true」にしたほうがよいかと思います。

以上、日本語にする場合のオプションを紹介しました。

関連記事