Bootstrap Date Range Picker with two ranges with one empty at the beginning

Question

I am trying to create a control panel with two ranges, using the first date range to create a simple chart, and the second date range to compare with the first.

The first one works fine, but I am having problems creating the second one, which should start from empty and able to select a range or clear the date.

My 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>

My Script:

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('');
});

What happens is that the second date, which should be empty, does not show the date after the selection.

Answer 1

The second input remains empty because you never set a value in it.

, cb, (cb2 ), .

, daterangepicker 2 , Object , docs :

Pick Range Picker , , .

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

Edit:

cancel.daterangepicker , , $(this).find('span').html('');. , .