如何使用 i18n 自定义日期格式和提示文本的日期范围选择器

Question

我想自定义我的日历，

这是当前的代码。

我如何更改它以符合新要求。

:javascript
  $(document).ready(function() {
    $('#date-range-picker').daterangepicker(
      {
        format: 'YYYY/MM/DD',
        dateLimit: { days: 30 }
      },
      function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
      }
    );
  });

Answer 1

您在daterangepicker站点上有非常好的文档和配置生成器。您应该使用对象，如下所示：locale

$(document).ready(function() {
    $('#date-range-picker').daterangepicker({
        format: 'YYYY/MM/DD',
        dateLimit: { days: 30 },
        locale: {
            "format": "MM/DD/YYYY",
            "separator": " - ",
            "applyLabel": "Apply",
            "cancelLabel": "Cancel",
            "fromLabel": "From",
            "toLabel": "To",
            "customRangeLabel": "Custom",
            "daysOfWeek": [
                "Su",
                "Mo",
                "Tu",
                "We",
                "Th",
                "Fr",
                "Sa"
            ],
            "monthNames": [
                "January",
                "February",
                "March",
                "April",
                "May",
                "June",
                "July",
                "August",
                "September",
                "October",
                "November",
                "December"
            ],
            "firstDay": 1
        },
    },
    function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
    });
});

Answer 2

我假设您使用daterangepicker并且有一个如下所示的输入字段：

<input id="date-range-picker" type="text">

确保 jquery 和 daterangepicker 库已就位。然后您应该能够自定义该字段。我认为您忘记将“格式”选项放入“区域设置”对象中：

$(document).ready(function() {
    $('#date-range-picker').daterangepicker({
        "dateLimit": {
            "days": 7
        },
        "locale": {
            "format": "YYYY/MM/DD"
        }
    });
});

请参阅配置生成器来使用 daterangepicker 并获取有效的配置。检查区域设置选项，以便您可以输入中文翻译。