twitter bootstrap - deshabilitar - Bootstrap selector de rango de fechas con dos rangos con uno vacío al comienzo

tooltip bootstrap 4

Question

Estoy tratando de construir un tablero con 2 rangos usando el primer rango de fechas para construir un gráfico simple, y el segundo rango de fechas para compararlo con el primero.

El primero funciona bien, pero tengo problemas para construir el segundo que tiene que empezar en blanco y poder seleccionar un rango o borrar la fecha.

Mi HTML es:

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

Mi guión:

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

Lo que sucede es que la segunda fecha que debe comenzar vacía, no muestra ninguna fecha después de una selección.

Answer 1

Su segunda entrada permanece vacía porque nunca establece un valor en ella.

Primero se obtiene un valor porque se llama a la función cb , por lo que puede crear un método similar ( cb2 en mi ejemplo) para actualizar el valor de la entrada del segundo selector.

Tenga en cuenta que la función daterangepicker acepta 2 parámetros, un Object opciones y una función de devolución de llamada, como dice el documento :

Puede personalizar el selector de intervalo de fechas con opciones y recibir notificaciones cuando el usuario elija nuevas fechas proporcionando una función de devolución de llamada.

De modo que puede agregar la devolución de llamada cb2 a la #reportrange-2 .

Aquí una muestra de trabajo:

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>

Editar:

cancel.daterangepicker función de devolución de llamada cancel.daterangepicker después de su comentario, ahora borrará la entrada usando $(this).find(''span'').html(''''); . Si lo necesita, puede hacer lo mismo para el primer selector.