简体   繁体   English

jQuery Datepicker 本地化

[英]jQuery Datepicker localization

I need a french calendar and I can't understand the problem.我需要一个法国日历,但我无法理解这个问题。 I guess I'm not using the regional options like it should be.我想我没有像它应该的那样使用区域选项。 But...但...

Here is my code :这是我的代码:

$(function() {
  $('#Date').datepicker({
      showMonthAfterYear: false,
      showOn: 'both',
      buttonImage: 'media/img/calendar.png',
      buttonImageOnly: true,
      dateFormat:'d MM, y'
    },
    $.datepicker.regional['fr']
  );
});

That code should work, but you need to include the localization in your page (it isn't included by default).该代码应该可以工作,但您需要在页面中包含本地化(默认情况下不包含)。 Try putting this in your <head> tag, somewhere after you include jQuery and jQueryUI:试着把它放在你的<head>标签中,你包含 jQuery 和 jQueryUI之后的某个地方:

<script type="text/javascript"
        src="https://raw.githubusercontent.com/jquery/jquery-ui/master/ui/i18n/datepicker-fr.js">
</script>

I can't find where this is documented on the jQueryUI site, but if you view the source of this demo you'll see that this is how they do it.我在 jQueryUI 站点上找不到这方面的记录,但是如果您查看此演示的源代码,您会发现他们就是这样做的。 Also, please note that including this JS file will set the datepicker defaults to French, so if you want only some datepickers to be in French, you'll have to set the default back to English.另外,请注意,包含此 JS 文件会将 datepicker 默认设置为法语,因此如果您只希望某些datepicker 为法语,则必须将默认设置重新设置为英语。

You can find all languages here at github: https://github.com/jquery/jquery-ui/tree/master/ui/i18n您可以在 github 上找到所有语言: https : //github.com/jquery/jquery-ui/tree/master/ui/i18n

You can do like this你可以这样做

 $.datepicker.regional['fr'] = {clearText: 'Effacer', clearStatus: '',
    closeText: 'Fermer', closeStatus: 'Fermer sans modifier',
    prevText: '&lt;Préc', prevStatus: 'Voir le mois précédent',
    nextText: 'Suiv&gt;', nextStatus: 'Voir le mois suivant',
    currentText: 'Courant', currentStatus: 'Voir le mois courant',
    monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
    'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
    monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
    'Jul','Aoû','Sep','Oct','Nov','Déc'],
    monthStatus: 'Voir un autre mois', yearStatus: 'Voir un autre année',
    weekHeader: 'Sm', weekStatus: '',
    dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
    dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
    dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
    dayStatus: 'Utiliser DD comme premier jour de la semaine', dateStatus: 'Choisir le DD, MM d',
    dateFormat: 'dd/mm/yy', firstDay: 0, 
    initStatus: 'Choisir la date', isRTL: false};
 $.datepicker.setDefaults($.datepicker.regional['fr']);

If you want to include some options besides regional localization, you have to use $.extend, like this:如果你想包含除区域本地化之外的一些选项,你必须使用 $.extend,如下所示:

$(function() {
   $('#Date').datepicker($.extend({
      showMonthAfterYear: false,
      dateFormat:'d MM, y'
    },
    $.datepicker.regional['fr']
  ));
});

You must extend the regional options like this (code split on multiple lines for readability):您必须像这样扩展区域选项(代码拆分为多行以提高可读性):

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

The order of parameters is important because of the way jQuery.extend works.由于jQuery.extend工作方式,参数的顺序很重要。 Two incorrect examples:两个不正确的例子:

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

PS: you also need to load the jQuery UI i18n files: PS:您还需要加载 jQuery UI i18n 文件:

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

In case you are looking for datepicker in spanish (datepicker en español)如果您正在寻找西班牙语日期选择器 (datepicker en español)

<script type="text/javascript">
    $.datepicker.regional['es'] = {
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mc', 'Ju', 'Vi', 'Sa']
    }

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

</script>

datepicker in Finnish (Käännös suomeksi)芬兰语日期选择器 (Käännös suomeksi)

$.datepicker.regional['fi'] = {
  closeText: "Valmis", // Display text for close link
  prevText: "Edel", // Display text for previous month link
  nextText: "Seur", // Display text for next month link
  currentText: "Tänään", // Display text for current month link
  monthNames: [ "Tammikuu","Helmikuu","Maaliskuu","Huhtikuu","Toukokuu","Kesäkuu",
  "Heinäkuu","Elokuu","Syyskuu","Lokakuu","Marraskuu","Joulukuu" ], // Names of months for drop-down and formatting
  monthNamesShort: [ "Tam", "Hel", "Maa", "Huh", "Tou", "Kes", "Hei", "Elo", "Syy", "Lok", "Mar", "Jou" ], // For formatting
  dayNames: [ "Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai" ], // For formatting
  dayNamesShort: [ "Sun", "Maa", "Tii", "Kes", "Tor", "Per", "Lau" ], // For formatting
  dayNamesMin: [ "Su","Ma","Ti","Ke","To","Pe","La" ], // Column headings for days starting at Sunday
  weekHeader: "Vk", // Column header for week of the year
  dateFormat: "mm/dd/yy", // See format options on parseDate
  firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
  isRTL: false, // True if right-to-left language, false if left-to-right
  showMonthAfterYear: false, // True if the year select precedes month, false for month then year
  yearSuffix: "" // Additional text to append to the year in the month headers
  };

Datepicker in german (Deutsch):德语日期选择器(德语):

$.datepicker.regional['de'] = {
    monthNames: ['Januar','Februar','März','April','Mai','Juni',
    'Juli','August','September','Oktober','November','Dezember'],
    monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
    'Jul','Aug','Sep','Okt','Nov','Dez'],
    dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
    dayNamesShort: ['Son','Mon','Die','Mit','Don','Fre','Sam'],
    dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
    firstDay: 1};
 $.datepicker.setDefaults($.datepicker.regional['de']);

I just Added我刚刚添加

jQuery.datetimepicker.setLocale('fr');

and It's worked它起作用了

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM