Bootstrap 日期范围选择器，有两个范围，开头为空

Question

我正在尝试构建一个包含 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('');
});

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

Answer 1

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

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

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

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

因此您可以将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(''); 清除输入。如果你需要，你可以为第一个选择器做同样的事情。