Javascript 如何本地化jQueryUIDateRangePicker？

我正在使用jQueryUIDateRangePicker（）。 我想这个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;
}

日期显示为

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

未拾取使用矩设置的区域设置，结果始终为英语（默认）

---

注意：我没有设法让minDate和startDate与矩（）一起工作，所以如果有人对此有线索的话。请帮帮我

因此，我建议如下示例：

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

工作示例：

因此，这增加了本地化。如果我们回顾DatePicker示例中的步骤，他们建议执行以下操作：

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

或：

每个本地化都包含在自己的文件中，名称后面附加了语言代码，例如法语的

jquery.ui.datepicker-fr.js

。所需的本地化文件应包含在主日期选择器代码之后。每个本地化文件将其选项添加到可用的本地化集中，并自动将其作为默认值应用于所有实例。本地化文件可在上找到

因此，这一点也很重要。因此，对于您的代码，我建议如下

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

半工作示例：

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

---

我希望这会有所帮助。

如果它使用

$.ui.datepicker

作为小部件的基础，您应该是abl；e以同样的方式进行本地化。基于git的详细信息，这是一个类似于Google Analytics中使用的日期范围选择器的jQuery UI小部件；支持多个月、自定义预设范围和智能定位；ThemeRoller准备就绪，便于移动。我认为，一旦初始化了daterangepicker，您就需要寻址datepicker对象并设置区域默认值。需要测试一下。@Twisty谢谢你的回答！我如何计算小部件的基础？我仍在努力。我想您只需要使用

$.datepicker.regional[]

中的返回对象

.extend（）

日期选择器选项。有两种方法可以做到这一点，一种是初始化，另一种是后期初始化。

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