Bootstrap Datepicker - selecting date from inline/embedded version

Question

Can someone explain how to capture the selected date from the inline/embedded version of Eternicode's extended Bootstrape Datepicker - http://eternicode.github.io/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'm sure is clear, I want it to write to the hidden input when the date selected changes.

I'm sure i'm missing something obvious, but the other examples write to the input it is linked too, but there seems to be no obvious way the data is output from the inline version.

All help appreciated.

Solution 1

Nevermind, the answer was given via a 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'))
    });

Solution 2

You can also use this to get all dates (for multidate)

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

Solution 3

Recently I am working in a project that needs to implement some pages using datepicker for more user usability, more specific Bootstrap 3 DatePicker, particulary I think is the best framework I ever found on the internet. While I was developing, I found the same problem you describe, but how I don't know what specific framework you are using, I am describing my solution and my code. Initially, the framework in question is the Bootstrap 3 Datepicker. This answer may not be useful to some users using another frameworks, different from this.

My HTML code:

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

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

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

Finally, I implemented 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);
});

The result:

I hope that helps you.