Локализация jQuery Datepicker

65

Мне нужен французский календарь, и я не могу понять проблему. Наверное, я не использую региональные варианты, как должно быть. Но...

Вот мой код:

$(function() {
  $('#Date').datepicker({
      showMonthAfterYear: false,
      showOn: 'both',
      buttonImage: 'media/img/calendar.png',
      buttonImageOnly: true,
      dateFormat:'d MM, y'
    },
    $.datepicker.regional['fr']
  );
});
Теги:
localization
internationalization
jquery-ui-datepicker

6 ответов

38
Лучший ответ

Вы можете сделать это следующим образом:

 $.datepicker.regional['fr'] = {clearText: 'Effacer', clearStatus: '',
    closeText: 'Fermer', closeStatus: 'Fermer sans modifier',
    prevText: '<Préc', prevStatus: 'Voir le mois précédent',
    nextText: 'Suiv>', 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']);
Поделиться
  • 1
    На самом деле я нашел этот подход лучшим для моих целей. Таким образом, вы можете вводить строки с помощью своих собственных переменных, и вам не нужно полагаться на (иногда неполную) локализацию пользовательского интерфейса jQuery.
68

Этот код должен работать, но вам нужно включить локализацию на свою страницу (она не включена по умолчанию). Попробуйте поместить это в свой тег <head>, где-то после включения jQuery и jQueryUI:

<script type="text/javascript"
        src="/datepicker-fr.js">
</script>

Я не могу найти, где это задокументировано на сайте jQueryUI, но если вы просмотрите источник этой демонстрации, вы увидите, что так они это делают. Кроме того, обратите внимание, что в том числе этот JS файл установит значение datepicker по-умолчанию на французский, поэтому, если вы хотите, чтобы только некоторые датпикеры находились на французском языке, вам нужно установить значение по умолчанию на английский.

Вы можете найти все языки здесь, в github: https://github.com/jquery/jquery-ui/tree/master/ui/i18n

Поделиться
Показать ещё 1 комментарий
6

Если вы хотите включить некоторые параметры, кроме региональной локализации, вам нужно использовать $.extend, например:

$(function() {
   $('#Date').datepicker($.extend({
      showMonthAfterYear: false,
      dateFormat:'d MM, y'
    },
    $.datepicker.regional['fr']
  ));
});
Поделиться
  • 1
    Это неверно Он перезапишет формат даты и покажет настройки месяц за годом с настройками французского региона.
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="/jquery-ui-i18n.min.js">
</script>
Поделиться
  • 2
    Это именно то, что решает мою проблему (установка языкового стандарта сбрасывает параметр dateFormat, даже если он установлен явно). Спасибо (и здорово, что вы показали нерабочие примеры).
  • 0
    Это оно! Региональная настройка сбрасывает параметры Datepicker! Искал это два дня.
3

Если вы ищете 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>
Поделиться
0

Datepicker на немецком языке (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']);
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню