Як локалізувати датчик вибору інтерфейсу jQuery?

Мені дуже потрібен локалізований спадний календар. Англійський календар точно не передає передового досвіду на веб-сайті Норвегії ;-)

Я експериментував з jQuery DatePicker , їхній веб-сайт говорить, що його можна локалізувати, однак це, здається, не працює.

Я використовую ASPNET.MVC, і мені дуже хочеться дотримуватися однієї бібліотеки javascript. У цьому випадку jQuery.

Календар інструментарію ajax був би прийнятним, якби тільки він також відображав норвезькі імена.

Оновлення: Дивовижно! Я бачу, що я пропускаю мовні файли, не така вже й незначна деталь :-)

Для тих, хто все ще має проблеми, ви повинні завантажити мовний файл, який хочете, звідси:

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

а потім включіть його на свою сторінку, наприклад, наприклад (італійською мовою):

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

потім використовуйте код zilverdistel : D

Я розібрав демонстрацію та реалізував її наступним чином:

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

Мені потрібно було також встановити за замовчуванням формат дати ...

Рядок $.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();

У цьому випадку ваш підбірник даних правильно переведений.

  $.datepicker.setDefaults({
    closeText: "关闭",
    prevText: "<上月",
    nextText: "下月>",
    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

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роботи. Два неправильних приклади:

/*
 * 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"]);

Ось приклад того, як можна зробити локалізацію без додаткової бібліотеки.

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

  $.datepicker.regional['cs'] = {
    closeText: 'Zavřít',
    prevText: '<Dříve',
    nextText: 'Později>',
    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>

Якщо ви використовуєте датчик вибору інтерфейсу jQuery та 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']);

про всяк випадок, коли хтось і досі не зациклюється на цьому, незважаючи на інші відповіді, я вирішив це:

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

зверніть увагу на додатковий 'GB'. Після цього воно спрацювало чудово.

Це рішення може допомогти.

$(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>

Я вирішив це, додавши властивість 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>

<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>

$ .datepicker.regional ["vi-VN"] = {closeText: "Đóng", prevText: "Trước", nextText: "Sau", currentText: "Hôm nay", monthNames: ["Tháng một", "Tháng hai "," Tháng ba "," Tháng tư "," Tháng năm "," Tháng sáu "," Tháng bảy "," Tháng tám "," Tháng chín "," Tháng mười "," Tháng mười một "," Tháng mười hai "], monthNamesShort: [" Một "," Hai "," Ba "," Bốn "," Năm "," Sáu "," Bảy "," Tám "," Chín "," Mười "," Mười một "," Mười hai "], імена дня: ["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"], тижденьHeader : "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", датаFormat: "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", датаFormat: "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"]);