bootstrap daterangepicker动态范围标签

时间:2018-01-18 17:25:34

标签: jquery bootstrap-daterangepicker

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

Q1 2018
Q4 2017
Q3 2017
Q2 2017

我无法弄清楚如何将变量作为键显示为范围标签。这显然不起作用:

        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变量的值而不是变量名的文本?

谢谢!

1 个答案:

答案 0 :(得分:0)

管理以解决这个问题。对于有同样问题的其他人来说,这是我的解决方案。

将范围添加到数组中:

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
    },