Как локализовать jQuery UI DateRangePicker?

Я использую jQuery UI DateRangePicker (ссылка). Я хотел бы, чтобы этот daterangepicker был доступен на 3 языках (nl, fr и en).

Я буду использовать оператор switch для установки настроек календаря.

switch(curr_lang) {
        case 'nl':
            moment.locale('nl');
            var daterangepicker = $("#search-vac-daterange").daterangepicker(
                {
                    initialText : 'Selecteer datums',
                    dateFormat: 'd MM yy',
                    datepickerOptions: {
                        minDate: new Date(),
                        startDate: new Date(),
                        maxDate: '+2y'
                    },
                    presetRanges: [{
                        text: 'Vandaag',
                        dateStart: function() { return moment() },
                        dateEnd: function() { return moment() }
                    }, {
                        text: 'Volgende 7 dagen',
                        dateStart: function() { return moment() },
                        dateEnd: function() { return moment().add(7, 'days') }
                    }, {
                        text: 'Volgende 30 dagen',
                        dateStart: function() { return moment() },
                        dateEnd: function() { return moment().add(30, 'days') }
                    }, {
                        text: 'Volgende 6 maanden',
                        dateStart: function() { return moment()},
                        dateEnd: function() { return moment().add(6, 'months') }
                    }, {
                        text: 'Volgend jaar',
                        dateStart: function() { return moment() },
                        dateEnd: function() { return moment().add(1,'years') }
                    }]
                }
            );
            break;
}

Дата отображается как

18 января – 17 февраля 2019 г.

Языковой стандарт, установленный с помощью moment, не используется, и результат всегда на английском языке (по умолчанию).

ПРИМЕЧАНИЕ: мне не удалось заставить minDate и startDate работать с moment(), поэтому, если у кого-то есть ключ к этому. Пожалуйста, помогите мне!


javascript datepicker jquery daterangepicker jquery-ui
person Dennis    schedule 18.01.2019    source источник
comment
Если он использует $.ui.datepicker в качестве основы для виджета, вы должны иметь возможность локализовать таким же образом. Судя по сведениям из git, виджет пользовательского интерфейса jQuery похож на средство выбора диапазона дат, используемое в Google Analytics; поддерживает несколько месяцев, настраиваемые предустановленные диапазоны и интеллектуальное позиционирование; ThemeRoller готов и удобен для мобильных устройств. Он не заявляет, что поддерживает его изначально.   -  person Twisty    schedule 18.01.2019
comment
Я думаю, что после того, как вы инициализировали daterangepicker, вам нужно будет обратиться к объекту datepicker и установить региональные значения по умолчанию. Нужно будет протестировать.   -  person Twisty    schedule 18.01.2019
comment
@Twisty спасибо за ответ! Как узнать основу виджета?   -  person Dennis    schedule 18.01.2019
comment
Я все еще работаю над этим. Я думаю, вы просто хотите .extend() datePickerOptions с возвращаемым объектом из $.datepicker.regional[]. Два способа сделать это, один при инициализации и один после инициализации.   -  person Twisty    schedule 19.01.2019

Ответы (1)


arrow_upward
1
arrow_downward

Поэтому я бы посоветовал следующий пример:

var cl = "en";
$(function() {
  var drp = $("#search-vac-daterange").daterangepicker({
    datepickerOptions: $.extend({
      minDate: new Date(),
      startDate: new Date(),
      maxDate: '+2y'
    }, $.datepicker.regional[cl])
  });
  var cdrp = drp.data("comiseoDaterangepicker");
  console.log(drp, cdrp);
});

Рабочий пример: https://jsfiddle.net/Twisty/c5db9rng/20/

Так что это добавляет локализации. Если мы рассмотрим шаги в примере с DatePicker, они советуют сделать следующее:

$( selector ).datepicker( $.datepicker.regional[ "fr" ] );

Or:

$( selector ).datepicker( "option", $.datepicker.regional[ "fr" ] );

Каждая локализация содержится в отдельном файле с кодом языка, добавленным к имени, например, jquery.ui.datepicker-fr.js для французского языка. Желаемый файл локализации должен быть включен после основного кода средства выбора даты. Каждый файл локализации добавляет свои параметры в набор доступных локализаций и автоматически применяет их по умолчанию для всех экземпляров. Файлы локализации можно найти по адресу https://github.com/jquery/jquery-ui/tree/master/ui/i18n.

Так что это тоже важно знать. Итак, для вашего кода я бы посоветовал следующее.

$(function() {
  switch (curr_lang) {
    case 'nl':
      moment.locale('nl');
      var daterangepicker = $("#search-vac-daterange").daterangepicker({
        initialText: 'Selecteer datums',
        dateFormat: 'd MM yy',
        datepickerOptions: $.extend({
          minDate: new Date(),
          startDate: new Date(),
          maxDate: '+2y'
        }, $.datepicker.regional[curr_lang]),
        presetRanges: [{
          text: 'Vandaag',
          dateStart: function() {
            return moment()
          },
          dateEnd: function() {
            return moment()
          }
        }, {
          text: 'Volgende 7 dagen',
          dateStart: function() {
            return moment()
          },
          dateEnd: function() {
            return moment().add(7, 'days')
          }
        }, {
          text: 'Volgende 30 dagen',
          dateStart: function() {
            return moment()
          },
          dateEnd: function() {
            return moment().add(30, 'days')
          }
        }, {
          text: 'Volgende 6 maanden',
          dateStart: function() {
            return moment()
          },
          dateEnd: function() {
            return moment().add(6, 'months')
          }
        }, {
          text: 'Volgend jaar',
          dateStart: function() {
            return moment()
          },
          dateEnd: function() {
            return moment().add(1, 'years')
          }
        }]
      });
      break;
  }
});

Полурабочий пример: https://jsfiddle.net/Twisty/c5db9rng/24/

В примере нет языкового файла, поэтому он не даст должных результатов, но код работает так, как ожидалось.

Надеюсь, это поможет.

person Twisty    schedule 18.01.2019