bootstrap daterangepicker 动态范围标签

Question

我在多个报告页面上有一个 daterangepicker 控件，我需要为其修改自定义范围。我需要能够根据当前日期更新自定义范围的标签，以显示当前季度和前 3 个季度中每个季度的单独范围：

我不知道如何传递一个变量作为显示范围标签的键。这显然行不通：

        ranges: {
            'This Month': [Date.today().moveToFirstDayOfMonth(), Date.today().moveToLastDayOfMonth()],
            'Last Month': [Date.today().moveToFirstDayOfMonth().add({ months: -1 }), Date.today().moveToFirstDayOfMonth().add({ days: -1 })],
            cq: [currentQuarter.quarterStartDate, currentQuarter.quarterEndDate],
            cm1: [currentM1.quarterStartDate, currentM1.quarterEndDate],
            cm2: [currentM2.quarterStartDate, currentM2.quarterEndDate],
            cm3: [currentM3.quarterStartDate, currentM3.quarterEndDate],
            'Year to Date': [Date.january().moveToFirstDayOfMonth(), Date.december().moveToLastDayOfMonth()],
            'Last Year': [Date.january().moveToFirstDayOfMonth().add({ years: -1 }), Date.december().moveToLastDayOfMonth().add({ years: -1 })],
            'Default Date': [getDefaultStartDate(), getDefaultEndDate()],
        },

它只显示以下范围：

This Month
Last Month
cq
cm1
cm2
cm3
Year to Date
Last Year
Default Date

如何让它显示我的 cq、cm1、cm2 和 cm3 变量的值而不是变量名称的文本？

谢谢！

Answer 1

设法解决了这个问题。这是我对其他有相同问题的人的解决方案。

将您的范围添加到数组：

var dateRanges = new Array();

dateRanges['This Month'] = [Date.today().moveToFirstDayOfMonth(), Date.today().moveToLastDayOfMonth()];
dateRanges['Last Month'] = [Date.today().moveToFirstDayOfMonth().add({ months: -1 }), Date.today().moveToFirstDayOfMonth().add({ days: -1 })];
dateRanges[currentQuarter.quarterLabel] = [currentQuarter.quarterStartDate, currentQuarter.quarterEndDate];
dateRanges[currentM1.quarterLabel] = [currentM1.quarterStartDate, currentM1.quarterEndDate];
dateRanges[currentM2.quarterLabel] = [currentM2.quarterStartDate, currentM2.quarterEndDate];
dateRanges[currentM3.quarterLabel] = [currentM3.quarterStartDate, currentM3.quarterEndDate];
dateRanges['Year to Date'] = [Date.january().moveToFirstDayOfMonth(), Date.december().moveToLastDayOfMonth()];
dateRanges['Last Year'] = [Date.january().moveToFirstDayOfMonth().add({ years: -1 }), Date.december().moveToLastDayOfMonth().add({ years: -1 })];
dateRanges['Default Date'] = [getDefaultStartDate(), getDefaultEndDate()];

然后将控件中的范围设置为等于数组：

$('#reportrange').daterangepicker(
    {
        ranges: dateRanges,
        alwaysShowCalendars: true,
        opens: opensright.length > 0 ? 'right' : 'left',
        format: 'M/dd/yyyy',
        separator: ' to ',
        startDate: startDate,
        endDate: endDate,
        minDate: getMinDate(),
        maxDate: getMaxDate(),
        mode: "enabled",
        locale: {
            applyLabel: 'Submit',
            fromLabel: 'From',
            toLabel: 'To',
            customRangeLabel: 'Custom Range',
            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            firstDay: 1
        },
        showWeekNumbers: true,
        buttonClasses: ['btn-danger','btn'],
        dateLimit: false
    },

bootstrap daterangepicker 动态范围标签

bootstrap daterangepicker dynamic range labels

jquery

bootstrap-daterangepicker