如何本地化 jQuery UI DateRangePicker？

Posted 2023-05-08

【中文标题】如何本地化 jQuery UI DateRangePicker？

【英文标题】：How to localize jQuery UI DateRangePicker?

【发布时间】：2019-06-12 23:13:53

【问题描述】：

我正在使用 jQuery UI DateRangePicker (reference)。 我希望这个 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 日

没有选择使用 moment 设置的语言环境，结果始终为英语（默认）。

注意：我没有设法让 minDate 和 startDate 与 moment() 一起工作，所以如果有人对此有所了解。请帮帮我！

【问题讨论】：

如果它使用$.ui.datepicker 作为小部件的基础，您应该能够以相同的方式进行本地化。基于来自 git 的详细信息，一个类似于 Google Analytics 中使用的日期范围选择器的 jQuery UI 小部件；支持多月、自定义预设范围和智能定位； ThemeRoller-ready 和移动友好。它没有声明它本身支持它。

我认为，一旦你初始化了 daterangepicker，你就需要处理 datepicker 对象并设置区域默认值。需要对其进行测试。

@Twisty 感谢您的回答！如何确定小部件的基础？

我还在努力。我想你只想.extend() datePickerOptions 与来自$.datepicker.regional[] 的返回对象。有两种方法可以做到这一点，一种在初始化中，一种在初始化后。

【参考方案1】：

所以我建议以下示例：

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" ] );

或者：

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

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

希望对你有帮助。