Làm cách nào để tôi bản địa hóa jQuery UI Datepicker?

Tôi thực sự cần một lịch thả xuống được bản địa hóa. Lịch tiếng Anh không chính xác thể hiện sự xuất sắc trên trang web Na Uy ;-)

Tôi đã thử nghiệm với jQuery DatePicker , trang web của họ cho biết nó có thể được bản địa hóa, tuy nhiên điều đó dường như không hiệu quả.

Tôi đang sử dụng ASPNET.MVC và tôi thực sự muốn gắn bó với một thư viện javascript. Trong trường hợp này jQuery.

Lịch của bộ công cụ ajax sẽ được chấp nhận, nếu nó cũng hiển thị tên Na Uy.

Cập nhật: Tuyệt vời! Tôi thấy tôi đang thiếu các tệp ngôn ngữ, một chi tiết không quá nhỏ :-)

Đối với những người vẫn gặp sự cố, bạn phải tải xuống tệp ngôn ngữ mà bạn muốn từ đây:

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

và sau đó đưa nó vào trang của bạn chẳng hạn như thế này (ngôn ngữ Ý):

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

sau đó sử dụng mã của zilverdistel : D

Tôi đã tìm ra bản demo và triển khai nó theo cách sau:

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

Tôi cũng cần đặt mặc định cho định dạng ngày ...

Chuỗi $.datepicker.regional['it']không dịch tất cả các từ.

Để dịch bộ chọn ngày, bạn phải chỉ định một số biến:

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

Trong trường hợp này, trình chọn ngày của bạn được dịch đúng cách.

  $.datepicker.setDefaults({
    closeText: "关闭",
    prevText: "<上月",
    nextText: "下月>",
    currentText: "今天",
    monthNames: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    monthNamesShort: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ],
    dayNamesShort: [ "周日","周一","周二","周三","周四","周五","周六" ],
    dayNamesMin: [ "日","一","二","三","四","五","六" ],
    weekHeader: "周",
    dateFormat: "yy-mm-dd",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: "年"
  });

mã i18n có thể được sao chép từ https://github.com/jquery/jquery-ui/tree/master/ui/i18n

1. Bạn cần tải các tệp jQuery UI i18n:

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

2. Sử dụng $.datepicker.setDefaultschức năng để đặt mặc định cho TẤT CẢ những người chọn ngày.

3. Trong trường hợp bạn muốn ghi đè (các) cài đặt trước khi đặt mặc định, bạn có thể sử dụng điều này:

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

Thứ tự của các tham số là quan trọng vì cách thức jQuery.extendhoạt động. Hai ví dụ không chính xác:

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

Đây là ví dụ về cách bạn có thể bản địa hóa mà không cần thêm thư viện.

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>

Nếu bạn sử dụng datepicker và moment.js của jQuery UI trên cùng một dự án, bạn nên loại bỏ dữ liệu ngôn ngữ của 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']);

đề phòng trường hợp ai đó VẪN mắc kẹt về điều này, mặc dù có các câu trả lời khác, tôi đã giải quyết vấn đề này bằng:

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

lưu ý thêm 'GB'. Sau đó nó hoạt động tốt.

Giải pháp này có thể hữu ích.

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

Tôi đã giải quyết nó bằng cách thêm thuộc tính 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: "Close", prevText: "Trước", nextText: "Sau", currentText: "Hôm nay", monthName: ["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 chín "," Tháng chín "," Tháng decim hai "], monthNamesShort: [" Một "," Hai "," Ba "," Bốn "," Năm "," Sáu "," Bảy "," Tám "," Chín "," Mười "," Mười a "," 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 : "Week", dateFormat: "dd / mm / yy", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};dayNamesShort: ["CN", "Hải", "Ba", "Tư", "Năm", "Sáu", "Bảy"], dayNamesMin: ["CN", "T2", "T3", "T4" , "T5", "T6", "T7"], tuầnHeader: "Week", dateFormat: "dd / mm / yy", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};dayNamesShort: ["CN", "Hải", "Ba", "Tư", "Năm", "Sáu", "Bảy"], dayNamesMin: ["CN", "T2", "T3", "T4" , "T5", "T6", "T7"], tuầnHeader: "Week", dateFormat: "dd / mm / yy", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};weekHeader: "Week", dateFormat: "dd / mm / yy", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};weekHeader: "Week", dateFormat: "dd / mm / yy", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};

        $.datepicker.setDefaults($.datepicker.regional["vi-VN"]);