【问题标题】:jQuery Datepicker localizationjQuery Datepicker 本地化
【发布时间】:2010-11-29 23:24:41
【问题描述】:

我需要一个法国日历,但我无法理解问题所在。我想我没有像应该那样使用区域选项。但是……

这是我的代码:

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

【问题讨论】:

    标签: javascript jquery-ui localization internationalization jquery-ui-datepicker


    【解决方案1】:

    该代码应该可以工作,但您需要在页面中包含本地化(默认情况下不包含)。试着把它放在你的 <head> 标记中,在 after 你包含 jQuery 和 jQueryUI 的某个地方:

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

    我在 jQueryUI 网站上找不到这方面的记录,但如果您 view the source of this demo 您会看到他们就是这样做的。另外,请注意,包含此 JS 文件会将日期选择器默认设置为法语,因此如果您只希望 一些 日期选择器使用法语,则必须将默认设置回英语。

    您可以在 github 上找到所有语言: https://github.com/jquery/jquery-ui/tree/master/ui/i18n

    【讨论】:

    【解决方案2】:

    你可以这样做

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

    【讨论】:

    • 实际上我发现这种方法最适合我的目的。这样您就可以通过自己的变量注入字符串,而不必依赖(有时不完整的)jQuery UI 本地化。
    【解决方案3】:

    如果你想包含一些除了区域本地化之外的选项,你必须使用 $.extend,像这样:

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

    【讨论】:

    • 这是不正确的。它将覆盖日期格式并使用法语区域显示逐年设置。
    【解决方案4】:

    您必须像这样扩展区域选项(代码拆分为多行以提高可读性):

    var options = $.extend(
        {},                                  // empty object
        $.datepicker.regional["fr"],         // fr regional
        { dateFormat: "d MM, y" /*, ... */ } // your custom options
    );
    $("#datepicker").datepicker(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"]);
    

    PS:你还需要加载 jQuery UI i18n 文件:

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

    【讨论】:

    • 这正是解决我的问题的方法(即使明确设置,设置区域设置也会重置 dateFormat 选项)。谢谢(太好了,你展示了无效的例子)。
    • 就是这样!设置区域会重置 Datepicker 选项!找了两天。
    【解决方案5】:

    如果您正在寻找西班牙语的 datepicker (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>
    

    【讨论】:

      【解决方案6】:

      德语日期选择器(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']);
      

      【讨论】:

        【解决方案7】:

        芬兰语日期选择器 (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
          };
        

        【讨论】:

          【解决方案8】:

          我刚刚添加

          jQuery.datetimepicker.setLocale('fr');
          

          成功了

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2012-03-19
            • 2017-08-04
            • 2012-01-21
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2013-02-21
            相关资源
            最近更新 更多