How to localize jQuery UI DateRangePicker?

问题:

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

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

The date appears as

18 January 2019 - 17 February 2019

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

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!

回答1:

So what I would advise is the following example:

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

Working Example: https://jsfiddle.net/Twisty/c5db9rng/20/

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

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

Or:

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

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

Semi-Working Example: 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.

I hope that helps.