如何本地化jQuery UI DateRangePicker? [英] How to localize jQuery UI DateRangePicker?

问题描述

我正在使用jQuery UI DateRangePicker(引用). 我想要这个daterangepicker提供3种语言(nl，fr和en).

I am using jQuery UI DateRangePicker (reference). I would like this daterangepicker available in 3 languages (nl, fr and en).

我将使用switch语句设置日历的设置.

I will be using a switch statement to set the settings for the calendar.

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;
}

日期显示为

2019年1月18日-2019年2月17日

不提取使用动量设置的语言环境，并且结果始终为英语(默认).

The locale set with moment is not being picked up, and the result is always in English (default).

注意::我没有设法使minDate和startDate与moment()一起使用，因此，如果有人对此有所了解.请帮帮我！

NOTE: I did not manage to get the minDate and startDate to work with moment(), so if anyone has a clue for this. Please help me out!

推荐答案

所以我建议以下示例:

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示例中的步骤，则建议执行以下操作:

So this adds the localization. If we review the steps in the DatePicker example, they advise doing the following:

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

或者:

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

每个本地化均包含在其自己的文件中，并在名称后附加了语言代码，例如，法语为jquery.ui.datepicker-fr.js.所需的本地化文件应包含在主日期选择器代码之后.每个本地化文件都将其选项添加到可用的本地化集中，并自动将其作为所有实例的默认设置应用.可以在 https://github.com/jquery/找到本地化文件jquery-ui/tree/master/ui/i18n .

Each localization is contained within its own file with the language code appended to the name, e.g., jquery.ui.datepicker-fr.js for French. The desired localization file should be included after the main datepicker code. Each localization file adds its options to the set of available localizations and automatically applies them as defaults for all instances. Localization files can be found at https://github.com/jquery/jquery-ui/tree/master/ui/i18n.

因此要意识到这一点也很重要.因此，对于您的代码，我建议您采取以下措施.

So that is also important to be aware of. So for your code, I would advise the following.

$(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/

该示例没有语言文件，因此不会给出正确的结果，但是代码按预期工作.

The example does not have the language file, so it's not going to give the proper results, but the code works as expected.

我希望能帮上忙.

这篇关于如何本地化jQuery UI DateRangePicker?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！