Cannot read property 'setStartDate' of undefined

Question

I have the following bootstrap Daterange picker:

<div class="form-group">
  <label class="control-label col-md-3">Inicio: </label>
  <div class="col-md-7">
     <div class="input-group input-large date-picker input-daterange" data-date="2014-03-01" data-date-format="yyyy-mm-dd" id="div_datas_funcao_atual">
         <input type="text" class="form-control" name="funcao_atual_inicio" id="funcao_atual_inicio" value="<?php echo $Hoje ?>">
         <span class="input-group-addon"> fim </span>
         <input type="text" class="form-control" name="funcao_atual_fim" id="funcao_atual_fim" value="<?php echo $Hoje ?>">
     </div>
  </div>
</div>

And I have this code to update the Daterange picker:

 function mostra_datas_empreitada(){

     ID = $('#empreitada_atual').val();

     $.ajax({
             url: 'php/sst_pessoas.php?tipo_acao=empreitada_datas&id='+ID,
             type: 'get',
             data: { tag: 'getData'},
             dataType: 'json',
             success: function (dados) {
                 if (dados.sucesso) {                          
                     dt_inicial = dados.dt_inicio;
                     dt_final = dados.dt_fim;
                     $('#div_datas_funcao_atual').data('daterangepicker').setStartDate(dt_inicial);
                     $('#div_datas_funcao_atual').data('daterangepicker').setEndDate(dt_final);
                 }
             }
     });
 }

The ajax call returns the following data:

{"sucesso":true,"dt_inicio":"2015-08-31","dt_fim":"2015-09-04"}

After ajax call, the DaterangePicker values don't change, and I receive the message "Cannot read property 'setStartDate' of undefined". I don't know what's wrong. Any help is appreciated. thanks.

Answer 1

I do not see the initialization of the component. Try this.

    $('#daterange').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });

//change the selected date range of that picker
$('#daterange').data('daterangepicker').setStartDate('03/01/2014');
$('#daterange').data('daterangepicker').setEndDate('03/31/2014');

Answer 2

I think you need to select the inputs you are trying to update instead of their container. Try:

 function mostra_datas_empreitada(){

 ID = $('#empreitada_atual').val();

 $.ajax({
         url: 'php/sst_pessoas.php?tipo_acao=empreitada_datas&id='+ID,
         type: 'get',
         data: { tag: 'getData'},
         dataType: 'json',
         success: function (dados) {
             if (dados.sucesso) {                          
                 dt_inicial = dados.dt_inicio;
                 dt_final = dados.dt_fim;

//Change these two selectors:                     
$('#funcao_atual_inicio').data('daterangepicker').setStartDate(dt_inicial);                     
$('#funcao_atual_fim').data('daterangepicker').setEndDate(dt_final);

             }
         }
 });
 }

Or, if what @Mickey suggested is correct and you haven't initialized the datepicker yet, try:

$('#div_datas_funcao_atual').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });

//change the selected date range of that picker
$('#div_datas_funcao_atual').data('daterangepicker').setStartDate('03/01/2014');
$('#div_datas_funcao_atual').data('daterangepicker').setEndDate('03/31/2014');