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.

` $('#div_datas_funcao_atual').data('daterangepicker')`: The element #div_datas_funcao_atual doesn't exists or the data[daterangepicker] is not set. Try to make separated steps and log every step (query element, get data) — Maxwell s.c
– Maxwell s.c, Commented Sep 1, 2017 at 12:54

Mickey · Accepted Answer · 2017-09-01 13:00:15Z

2

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

answered Sep 1, 2017 at 13:00

Mickey

1732 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mario Cordeiro Over a year ago

I tried your example, but gives me the same error on $('#daterange').data('daterangepicker').setStartDate('03/01/2014');

Mario Cordeiro Over a year ago

I said the initialization it's fine, because I can select dates in the range and the daterange is working fine on user point of view.

Mario Cordeiro Over a year ago

Do you think the meaning of 'undefined' has to do with the component (daterangepicker) or with the date itself?

rmbaumer · Accepted Answer · 2017-09-01 13:28:00Z

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

Hmmm. Try the updated answer then by initializing the datepicker with $('#div_datas_funcao_atual').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });
Maybe try using '/' in your dates instead of '-'. See this: github.com/dangrossman/bootstrap-daterangepicker/issues/1130

Collectives™ on Stack Overflow

Cannot read property 'setStartDate' of undefined

2 Answers 2

3 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Related