如何使用日期格式自定义日期范围选择器并使用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并且你有一个像这样的输入字段：

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

确保jquery和daterangepicker库到位。然后你应该能够自定义该字段。我想你忘了把“格式”选项放到“locale”对象中：

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

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

Answer 2

您在Configuration Generator网站上有很好的文档和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);
    });
});