Bootstrap Datepicker - select date from inline / inline version

Question

Can someone explain how to grab the selected date from the built-in version of the built-in version of Eternicode Extended Bootprape Datepicker - http://eternicode.imtqy.com/bootstrap-datepicker/

<form class="form-date" role="form" action="/'.$ref.'/edit" method="get"> <div class="form-group" id="datepickid"> <div></div> <input type="hidden" name="dt_due" id="dt_due"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> ... $('#datepickid div').datepicker({ startDate: "+1d", todayHighlight: true }); 

As I am sure, it is clear that I want him to write down hidden input when the selected date changes.

I am sure that I am missing something obvious, but other examples are written to the input, which is also connected, but there seems to be no obvious way to output data from the built-in version.

All help was appreciated.

Answer 1

Nevermind, a response was received through the Google group.

I had to add .on (ChangeDate) ...

 $('#datepickid div').datepicker({ startDate: "+1d", todayHighlight: true }).on('changeDate', function(e){ $('#dt_due').val(e.format('dd/mm/yyyy')) }); 

Answer 2

You can also use it to get all dates (for multi-page)

 $('#datepickid div').datepicker({ startDate: "+1d", todayHighlight: true }).on('changeDate', function(e){ $('#dt_due').val( $('#datepickid div').datepicker('getFormattedDate') // get the formatted date from the datepicker (using the format you instantiated it with) ); }); 

Answer 3

Recently, I am working on a project that should implement some pages using datepicker for more convenient use by users, more specific Bootstrap 3 DatePicker, in particular, I believe that this is the best structure I've ever met on the Internet. While I was developing, I found the same problem that you are describing, but as I do not know what specific structure you are using, I am describing my solution and my code. The structure under consideration was Bootstrap 3 Datepicker . This answer may not be suitable for some users using frameworks other than this.

My HTML is:

 <div class="form-group form-group-md" align="left"> <label for="inputDataInicial" class="col-form-label">Data Inicial:</label> <div class="inputDataInicial" name="inputDataInicial" id="inputDataInicial"></div> </div> 

To initialize datepicker:

 $("#inputDataInicial").datetimepicker({ format: 'DD/MM/YYYY', locale: 'pt-br', useCurrent: true, inline: true, sideBySide: true }).on('dp.change', function(e){ $('.inputDataInicial').val(e.date.format('YYYYMMDD')); }); 

Then I set the default date using moment framework - Bootstrap 3 Datepicker uses it:

 var currentDate = moment().format('YYYYMMDD'); $('.inputDataInicial').val(currentDate); $('.inputDataFinal').val(currentDate); 

Finally, I selected a simple button to get the selected date:

 $(".btn_relatorio_amap_gerar").unbind("click").on("click",function(e) { var data_inicial = $(".inputDataInicial").val() + ' 00:00:00'; var data_final = $(".inputDataFinal").val() + ' 23:59:59'; alert(data_inicial + ' - ' + data_final); }); 

Result:

I hope this helps you.