4

我正在尝试使用第一个日期范围来构建一个简单的图表，并使用第二个日期范围与第一个日期范围进行比较来构建一个具有 2 个范围的仪表板。

第一个工作正常，但我在构建第二个必须开始为空并且能够选择范围或清除日期时遇到问题。

我的 HTML 是：

<div id="reportrange-1" class="dates pull-right">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
        <span></span> <b class="caret"></b>
</div>
<div id="reportrange-2" class="dates pull-right date-compare">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
        <span></span> <b class="caret"></b>
</div>

我的脚本：

var _reportDateStart = moment().subtract(6, 'days').format('YYYY-MM-DD');
var _reportDateEnd = moment().subtract(1, 'days').format('YYYY-MM-DD');

var _reportCompareToDateStart;
var _reportCompareToDateEnd;

moment.locale('pt');

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

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

$('#reportrange-1').daterangepicker({
    locale: {
        format: 'DD-MM-YYYY'
    },
    startDate: start,
    endDate: end,
    ranges: {
        'Hoje': [moment(), moment()],
        'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
        'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
        'Este Mês': [moment().startOf('month'), moment().endOf('month')],
        'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
}, cb);

$('#reportrange-2').daterangepicker({
    autoUpdateInput: false,
    locale: {
        format: 'DD-MM-YYYY',
        cancelLabel: 'Limpar'
    },
    ranges: {
        'Hoje': [moment(), moment()],
        'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
        'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
        'Este Mês': [moment().startOf('month'), moment().endOf('month')],
        'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
});

cb(start, end);

$('#reportrange-1').on('apply.daterangepicker', function (ev, picker) {
    _reportDateStart = picker.startDate.format('YYYY-MM-DD');
    _reportDateEnd = picker.endDate.format('YYYY-MM-DD');

    _loadChart();
});

$('#reportrange-2').on('apply.daterangepicker', function (ev, picker) {
    _reportCompareToDateStart = picker.startDate.format('YYYY-MM-DD');
    _reportCompareToDateEnd = picker.endDate.format('YYYY-MM-DD');

    _loadChart();
});

$('#reportrange-2').on('cancel.daterangepicker', function (ev, picker) {
    $(this).val('');
});

发生的情况是，必须以空开头的第二个日期在选择后不显示任何日期。

在此处输入图像描述

4

1 回答 1

3

您的第二个输入仍然为空，因为您从未在其中设置值。

因为您调用了该cb函数，所以第一个获得了一个值，因此您可以创建一个类似的方法（cb2在我的示例中）来更新第二个选择器的输入值。

请注意，该daterangepicker函数接受 2 个参数，一个选项Object和一个回调函数，如文档所述：

您可以使用选项自定义日期范围选择器，并通过提供回调函数在用户选择新日期时收到通知。

因此，您可以将cb2回调添加到#reportrange-2初始化中。

这是一个工作示例：

var _reportDateStart = moment().subtract(6, 'days').format('YYYY-MM-DD');
var _reportDateEnd = moment().subtract(1, 'days').format('YYYY-MM-DD');

var _reportCompareToDateStart;
var _reportCompareToDateEnd;

moment.locale('pt');

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

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

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

$('#reportrange-1').daterangepicker({
  locale: {
    format: 'DD-MM-YYYY'
  },
  startDate: start,
  endDate: end,
  ranges: {
    'Hoje': [moment(), moment()],
    'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
    'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
    'Este Mês': [moment().startOf('month'), moment().endOf('month')],
    'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  }
}, cb);

$('#reportrange-2').daterangepicker({
  autoUpdateInput: false,
  locale: {
      format: 'DD-MM-YYYY',
      cancelLabel: 'Limpar'
  },
  ranges: {
    'Hoje': [moment(), moment()],
    'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
    'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
    'Este Mês': [moment().startOf('month'), moment().endOf('month')],
    'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  }
}, cb2);

cb(start, end);

$('#reportrange-1').on('apply.daterangepicker', function (ev, picker) {
  _reportDateStart = picker.startDate.format('YYYY-MM-DD');
  _reportDateEnd = picker.endDate.format('YYYY-MM-DD');

  _loadChart();
});

$('#reportrange-2').on('apply.daterangepicker', function (ev, picker) {
  _reportCompareToDateStart = picker.startDate.format('YYYY-MM-DD');
  _reportCompareToDateEnd = picker.endDate.format('YYYY-MM-DD');

  _loadChart();
});

$('#reportrange-2').on('cancel.daterangepicker', function (ev, picker) {
  // Clear current input
  // you can use this or the component id 
  $(this).find('span').html('');
  //$('#reportrange-2 span').html('');
});

function _loadChart(){
  // _loadChart
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/locale/pt.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<div id="reportrange-1" class="dates pull-right">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
        <span></span> <b class="caret"></b>
</div>
<div id="reportrange-2" class="dates pull-right date-compare">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
        <span></span> <b class="caret"></b>
</div>

编辑：

我cancel.daterangepicker在您发表评论后更改了回调函数，现在它将使用$(this).find('span').html('');. 如果你需要，你可以为第一个选择器做同样的事情。

于 2017-03-20T23:03:40.007 回答