如何本地化jQuery UI Datepicker？

Question

我真的需要一个本地化的下拉日历.英语日历并不能完全在挪威网站上传达卓越性;-)

我已经尝试过jQuery DatePicker,他们的网站说它可以本地化,但这似乎不起作用.

我正在使用ASPNET.MVC,我真的想坚持一个JavaScript库.在这种情况下jQuery.

ajax工具包日历是可以接受的,只要它也会显示挪威名称.

更新:太棒了!我看到我错过了语言文件,一个不那么小的细节:-)

Answer 1

对于那些仍然有问题的人,你必须从这里下载你想要的语言文件:

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

然后将其包含在您的页面中,例如(意大利语):

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

然后使用zilverdistel的代码:D

Answer 2

我想出了演示并按以下方式实现:

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

我还需要设置dateformat的默认值...

Answer 3

字符串$.datepicker.regional['it']不翻译所有单词.

要翻译datepicker,您必须指定一些变量:

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

在这种情况下,您的日期选择器已正确翻译.

Answer 4

  $.datepicker.setDefaults({
    closeText: "??",
    prevText: "<??",
    nextText: "??>",
    currentText: "??",
    monthNames: [ "??","??","??","??","??","??",
    "??","??","??","??","???","???" ],
    monthNamesShort: [ "??","??","??","??","??","??",
    "??","??","??","??","???","???" ],
    dayNames: [ "???","???","???","???","???","???","???" ],
    dayNamesShort: [ "??","??","??","??","??","??","??" ],
    dayNamesMin: [ "?","?","?","?","?","?","?" ],
    weekHeader: "?",
    dateFormat: "yy-mm-dd",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: "?"
  });

可以从https://github.com/jquery/jquery-ui/tree/master/ui/i18n复制i18n代码

Answer 5

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

Answer 6

这是没有一些额外库的情况下如何进行本地化的示例。

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>

Answer 7

如果您在同一项目上使用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']);