用Daterangepicker显示3个日历

时间:2019-02-18 05:04:49

标签: javascript twitter-bootstrap daterangepicker

我正在设置日期选择器,例如Google Analytics(分析)。使用Daterangepicker,我最多可以使用两个日历,并且我想添加另一个日历。

在插件的documentation中,没有提到可以自定义日历数量。

<div id="reportrange" class="btn btn-default" style="background: #fff;">
    <i class="fa fa-calendar"></i>&nbsp;
    <span></span>
    <i class="fa fa-caret-down"></i>
</div>
$(function() {

    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
        $('#reportrange span').html(start.format('D MMM YYYY') + ' - ' + end.format('D MMM YYYY'));
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
            'Hoy': [moment(), moment()],
            'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Este mes': [moment().startOf('month'), moment().endOf('month')],
            'El mes pasado': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
            'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
        },
        maxDate: '17/02/2019',
        showCustomRangeLabel: true,
        alwaysShowCalendars: true,
        opens: 'left',
        applyButtonClasses: 'btn-success'
    }, cb);

    cb(start, end);

});

这是我的代码https://jsfiddle.net/5n7fqtub/

0 个答案:

没有答案