jQuery UI Datepickerをローカライズするにはどうすればよいですか？

121

ローカライズされたドロップダウンカレンダーが本当に必要です。英語のカレンダーは、ノルウェーのウェブサイトでは卓越性を正確に伝えていません;-)

私はjQuery DatePickerを実験しましたが、彼らのウェブサイトはローカライズできると言っていますが、それはうまくいかないようです。

私はASPNET.MVCを使用していて、本当に1つのJavaScriptライブラリに固執したいと思っています。この場合はjQueryです。

ajaxツールキットカレンダーも、ノルウェー語の名前が表示される場合にのみ使用できます。

アップデート：すごい！言語ファイルが不足しているようですが、それほど細かいことではありません:-)

javascript  jquery-ui  localization  calendar  jquery-ui-datepicker 
— トーマス・アイド
ソース
このデモをご覧ください。ソースは、それを行う方法の良い例を示しています。
— トーマスワトナル09年

回答:

183

それでも問題が解決しない場合は、必要な言語ファイルをここからダウンロードする必要があります。

https://github.com/jquery/jquery-ui/tree/master/ui/i18n

次に、たとえば次のようにページに含めます（イタリア語）：

<script type="text/javascript" src="/scripts/jquery.ui.datepicker-it.js"></script>

次にzilverdistelのコードを使用します：D

— max4ever
ソース
このリンクはjQuery UIページにありませんか？私はそれをそこに見つけることができませんjqueryui.com/datepicker/#localization
— アダム
79

私はデモを理解し、次の方法で実装しました：

$.datepicker.setDefaults(
  $.extend(
    {'dateFormat':'dd-mm-yy'},
    $.datepicker.regional['nl']
  )
);

私もdateformatのデフォルトを設定する必要がありました...

— ジルバージステル
ソース
11
これは私のために働きました：$.datepicker.setDefaults($.datepicker.regional["uk"]);
— アラスター
26

文字列$.datepicker.regional['it']はすべての単語を翻訳するわけではありません。

日付ピッカーを翻訳するには、いくつかの変数を指定する必要があります。

$.datepicker.regional['it'] = {
    closeText: 'Chiudi', // set a close button text
    currentText: 'Oggi', // set today text
    monthNames: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno',   'Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'], // set month names
    monthNamesShort: ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'], // set short month names
    dayNames: ['Domenica','Luned&#236','Marted&#236','Mercoled&#236','Gioved&#236','Venerd&#236','Sabato'], // set days names
    dayNamesShort: ['Dom','Lun','Mar','Mer','Gio','Ven','Sab'], // set short day names
    dayNamesMin: ['Do','Lu','Ma','Me','Gio','Ve','Sa'], // set more short days names
    dateFormat: 'dd/mm/yy' // set format date
};

$.datepicker.setDefaults($.datepicker.regional['it']);

$(".datepicker").datepicker();

この場合、日付ピッカーは適切に翻訳されます。

— カンパゲドン
ソース
この回答は、ライブラリをインポートせずに、ローカリゼーションを直接追加する方法を示しています。これは、jQueryを利用$.getScript()してGoogleのホストされたAPIでメインライブラリをフェッチするために必要な方法です。
— Alexander Dixon
11 
  $.datepicker.setDefaults({
    closeText: "关闭",
    prevText: "&#x3C;上月",
    nextText: "下月&#x3E;",
    currentText: "今天",
    monthNames: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    monthNamesShort: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ],
    dayNamesShort: [ "周日","周一","周二","周三","周四","周五","周六" ],
    dayNamesMin: [ "日","一","二","三","四","五","六" ],
    weekHeader: "周",
    dateFormat: "yy-mm-dd",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: "年"
  });

i18nコードはhttps://github.com/jquery/jquery-ui/tree/master/ui/i18nからコピーできます

— user1087079
ソース
8

1. jQuery UI i18nファイルをロードする必要があります。

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js">
</script>

2.$.datepicker.setDefaults関数を使用して、すべての日付ピッカーのデフォルトを設定します。

3.デフォルトを設定する前に設定を上書きしたい場合は、これを使用できます。

var options = $.extend(
    {},                                  // empty object
    $.datepicker.regional["fr"],         // fr regional
    { dateFormat: "d MM, y" /*, ... */ } // your custom options
);
$.datepicker.setDefaults(options);

動作方法のため、パラメーターの順序は重要jQuery.extendです。2つの誤った例：

/*
 * This overwrites the global variable itself instead of creating a
 * customized copy of french regional settings
 */
$.extend($.datepicker.regional["fr"], { dateFormat: "d MM, y"});

/*
 * The desired dateFormat is overwritten by french regional 
 * settings' date format
 */
$.extend({ dateFormat: "d MM, y"}, $.datepicker.regional["fr"]);
— サルマンA
ソース
5

これは、追加のライブラリなしでローカライズを行う方法の例です。

jQuery(function($) {
  $('input.datetimepicker').datepicker({
    duration: '',
    changeMonth: false,
    changeYear: false,
    yearRange: '2010:2020',
    showTime: false,
    time24h: true
  });

  $.datepicker.regional['cs'] = {
    closeText: 'Zavřít',
    prevText: '&#x3c;Dříve',
    nextText: 'Později&#x3e;',
    currentText: 'Nyní',
    monthNames: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen',
      'září', 'říjen', 'listopad', 'prosinec'
    ],
    monthNamesShort: ['led', 'úno', 'bře', 'dub', 'kvě', 'čer', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'],
    dayNames: ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'],
    dayNamesShort: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
    dayNamesMin: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
    weekHeader: 'Týd',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };

  $.datepicker.setDefaults($.datepicker.regional['cs']);
});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
  <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
  <script src="datepicker-cs.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      console.log("test");
      $("#test").datepicker({
        dateFormat: "dd.m.yy",
        minDate: 0,
        showOtherMonths: true,
        firstDay: 1
      });
    });
  </script>
</head>

<body>
  <h1>Here is your datepicker</h1>
  <input id="test" type="text" />
</body>
</html>
スニペットを展開

— マレク・パベレク
ソース
5

同じプロジェクトでjQuery UIのdatepickerとmoment.jsを使用する場合は、moment.jsのロケールデータを便乗させる必要があります。

// Finnish. you need to include separate locale file for each locale: https://github.com/moment/moment/tree/develop/locale
moment.locale('fi'); 

// fetch locale data internal structure, so we can shove it inside jQuery UI
var momentLocaleData = moment.localeData(); 

$.datepicker.regional['user'] = {
    monthNames: momentLocaleData._months,
    monthNamesShort: momentLocaleData._monthsShort,
    dayNames: momentLocaleData._weekdays,
    dayNamesShort: momentLocaleData._weekdaysMin,
    dayNamesMin: momentLocaleData._weekdaysMin,
    firstDay: momentLocaleData._week.dow,
    dateFormat: 'yy-mm-dd' // "2016-11-22". date formatting tokens are not easily interchangeable between momentjs and jQuery UI (https://github.com/moment/moment/issues/890)
};

$.datepicker.setDefaults($.datepicker.regional['user']);
— joonas.fi
ソース
3

他の答えにもかかわらず、誰かがこれで立ち往生している場合に備えて、私はこれを次のように解決しました：

$.datepicker.setDefaults($.datepicker.regional['en-GB']);

余分な「GB」に注意してください。その後はうまくいきました。

— DevDonkey
ソース
1

このソリューションが役立つ場合があります。

$(document).ready(function () {
  var userLang = navigator.language || navigator.userLanguage;

  var options = $.extend({},
    $.datepicker.regional["ja"], {
      dateFormat: "yy/mm/dd",
      changeMonth: true,
      changeYear: true,
      highlightWeek: true
    }
  );

  $("#japaneseCalendar").datepicker(options);
});
#ui-datepicker-div {
  font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>

</body>
</html>
スニペットを展開

1

私はプロパティを追加することで解決しましたdata-date-language="it"：

$(document).ready(function() {
  $('#TxtDaDataDoc_Val').datepicker();
});
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="form-group col-xs-2 col-sm-2 col-md-2">
    <div class="input-group input-append date form-group" 
        id="TxtDaDataDoc" data-date-language="it">
        <input type="text" class="form-control" name="date" 
               id="TxtDaDataDoc_Val" runat="server" />
        <span class="input-group-addon add-on">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>
スニペットを展開

— ダニエレ
ソース
0 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src=">/js/datepicker-fr.js"></script>
<script>
jQuery(function() {
jQuery( "#datepicker" ).datepicker({minDate: 0 , dateFormat: 'mm/dd/yy'});
});

</script>

<script type="text/javascript">
$(document).ready(function(){
$('#datepicker').datepicker($.datepicker.regional['fr']);
});
</script>
— アムセトイ
ソース
0

$ .datepicker.regional ["vi-VN"] = {closeText： "Đóng"、prevText： "Trước"、nextText： "Sau"、currentText： "Hômnay"、monthNames：["Thángmột"、 "Thánghai 「、Thang ba」、「Thangtư」、「Thangnăm」、「Thangsáu」、「Thang bngy」、「Thangtám」、「Thángchín」、「Thanggmười」、「Thángmườimột」、「Tháng mườihai "]、monthNamesShort：["Một "、" Hai "、" Ba "、"Bốn "、"Nă​​m "、"Sáu "、"Bảy "、"Tám "、"Chín "、"Mười "、"Mười một "、"Mườihai "]、dayNames：["Chủnhật "、"Thứhai "、"Thứba "、"Thứtư "、"Thứnăm "、"Thứsáu "、"Thứbảy "]、dayNamesShort：[" CN "、" Hai "、" Ba "、 「Tư」、「Năm」、「Sáu」、「Bảy」]、dayNamesMin：[「CN」、「T2」、「T3」、「T4」、「T5」、「T6」、「T7」]、weekHeader ： "Tuần"、dateFormat： "dd / mm / yy"、firstDay：1、isRTL：false、showMonthAfterYear：false、yearSuffix： ""};dayNamesShort：["CN"、 "Hai"、 "Ba"、 "Tư"、 "Năm"、 "Sáu"、 "Bảy"]、dayNamesMin：["CN"、 "T2"、 "T3"、 "T4" 、 "T5"、 "T6"、 "T7"]、weekHeader： "Tuần"、dateFormat： "dd / mm / yy"、firstDay：1、isRTL：false、showMonthAfterYear：false、yearSuffix： ""};dayNamesShort：["CN"、 "Hai"、 "Ba"、 "Tư"、 "Năm"、 "Sáu"、 "Bảy"]、dayNamesMin：["CN"、 "T2"、 "T3"、 "T4" 、 "T5"、 "T6"、 "T7"]、weekHeader： "Tuần"、dateFormat： "dd / mm / yy"、firstDay：1、isRTL：false、showMonthAfterYear：false、yearSuffix： ""};weekHeader： "Tuần"、dateFormat： "dd / mm / yy"、firstDay：1、isRTL：false、showMonthAfterYear：false、yearSuffix： ""};weekHeader： "Tuần"、dateFormat： "dd / mm / yy"、firstDay：1、isRTL：false、showMonthAfterYear：false、yearSuffix： ""};

        $.datepicker.setDefaults($.datepicker.regional["vi-VN"]);
— TrầnVănHuy
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.