Jak zlokalizować Datepicker interfejsu użytkownika jQuery?

121

Naprawdę potrzebuję zlokalizowanego kalendarza rozwijanego. Angielski kalendarz nie mówi dokładnie o doskonałości na norweskiej stronie internetowej ;-)

Eksperymentowałem z jQuery DatePicker , na ich stronie internetowej jest napisane, że można go zlokalizować, ale to nie działa.

Używam ASPNET.MVC i naprawdę chcę trzymać się jednej biblioteki javascript. W tym przypadku jQuery.

Kalendarz z zestawu narzędzi AJAX byłby akceptowalny, gdyby tylko on wyświetlał norweskie nazwy.

Aktualizacja: super! Widzę, że brakuje mi plików językowych, nie tak drobny szczegół :-)

Thomas Eyde
źródło
Sprawdź to demo. Źródło podaje dobry przykład, jak to zrobić.
Thomas Watnedal

Odpowiedzi:

79

Rozszyfrowałem demo i zaimplementowałem w następujący sposób:

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

Musiałem też ustawić domyślny format daty ...

Zilverdistel
źródło
11
to zadziałało dla mnie:$.datepicker.setDefaults($.datepicker.regional["uk"]);
alaster
26

Ciąg $.datepicker.regional['it']nie tłumaczy wszystkich słów.

Aby przetłumaczyć datepicker, musisz określić kilka zmiennych:

$.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();

W tym przypadku datapicker jest poprawnie przetłumaczony.

kampageddon
źródło
Ta odpowiedź pokazuje, jak dodać lokalizację bezpośrednio, bez importowania bibliotek. Jest to metoda, której potrzebowałem, ponieważ używam jQuery $.getScript()do pobierania głównej biblioteki z hostowanego interfejsu API Google.
Alexander Dixon
11
  $.datepicker.setDefaults({
    closeText: "关闭",
    prevText: "<上月",
    nextText: "下月>",
    currentText: "今天",
    monthNames: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    monthNamesShort: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ],
    dayNamesShort: [ "周日","周一","周二","周三","周四","周五","周六" ],
    dayNamesMin: [ "日","一","二","三","四","五","六" ],
    weekHeader: "周",
    dateFormat: "yy-mm-dd",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: "年"
  });

kod i18n można skopiować z https://github.com/jquery/jquery-ui/tree/master/ui/i18n

user1087079
źródło
8

1. Musisz załadować pliki jQuery UI i18n:

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

2. Użyj $.datepicker.setDefaultsfunkcji, aby ustawić wartości domyślne dla WSZYSTKICH datepickerów.

3. Jeśli chcesz zmienić ustawienia przed ustawieniem wartości domyślnych, możesz użyć tego:

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

Kolejność parametrów jest ważna ze względu na sposób jQuery.extenddziałania. Dwa niepoprawne przykłady:

/*
 * 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"]);
Salman A
źródło
5

Oto przykład, jak możesz dokonać lokalizacji bez dodatkowej biblioteki.

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>

Marek Pavelek
źródło
5

Jeśli korzystasz z datepicker i moment.js interfejsu jQuery UI w tym samym projekcie, powinieneś przejść do danych regionalnych 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
źródło
3

na wypadek gdyby ktoś NADAL na tym utknął, pomimo innych odpowiedzi, rozwiązałem to za pomocą:

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

zwróć uwagę na dodatkowe „GB”. Potem działało dobrze.

DevDonkey
źródło
1

To rozwiązanie może pomóc.

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


źródło
1

Rozwiązałem to dodając właściwość 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>

Daniele
źródło
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>
Amusetoi
źródło
0

$ .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 ”,„ Chin ”,„ Mười ”,„ Mười một "," Mười hai "], 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 / rr", 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 / rr", 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 / rr", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};weekHeader: "Tuần", dateFormat: "dd / mm / rr", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};weekHeader: "Tuần", dateFormat: "dd / mm / rr", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};

        $.datepicker.setDefaults($.datepicker.regional["vi-VN"]);
Trần Văn Huy
źródło