Detect change to selected date with bootstrap-datepicker

Question

I have an input element with an attached datepicker created using bootstrap-datepicker.

<div class="well">     <div class="input-append date" id="dp3" data-date="2012-01-02" data-date-format="yyyy-mm-dd">         <input type="text" id="date-daily">         <span class="add-on"><i class="icon-th"></i></span>         </div> </div>  <script language="JavaScript" type="text/javascript">     $(document).ready(function() {         $('#dp3').datepicker();         $('#date-daily').val('0000-00-00');         $('#date-daily').change(function () {             console.log($('#date-daily').val());         });     }); </script> 

When the user changes the date by typing directly into the input element, I can get the value with the input element's onChange event, as shown above. But when the user changes the date from datepicker (i.e. by clicking a date on the calendar), the onChange handler is not called.

How can I detect changes to the selected date that are made via the datepicker, rather than by typing into the input element?

Answer 1

All others answers are related to jQuery UI datepicker, but the question is about bootstrap-datepicker.

You can use the on changeDate event to trigger a change event on the related input, and then handle both ways of changing the date from the onChange handler:

changeDate

Fired when the date is changed.

Example:

$('#dp3').datepicker().on('changeDate', function (ev) {     $('#date-daily').change(); }); $('#date-daily').val('0000-00-00'); $('#date-daily').change(function () {     console.log($('#date-daily').val()); }); 

Here is a working fiddle: http://jsfiddle.net/IrvinDominin/frjhgpn8/

Answer 2

Try this:

$("#dp3").on("dp.change", function(e) {     alert('hey'); });