Detect transition to selected date using bootstrap-datepicker

Question

I have an input element with an attached date pointer 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 in the input element, I can get the value using the onChange event of the input element, as shown above. But when the user changes the date from the selection date (that is, by clicking on the date in the calendar), the onChange handler is not called.

How can I detect changes in a selected date made using a date picker, rather than by typing in an input element?

Answer 1

All other answers relate to jQuery UI datepicker , but the question is about bootstrap-datepicker .

You can use the on changeDate event to raise a change event on the associated input, and then handle both methods of changing the date from the onChange handler:

Changedate

It is executed when the date changes.

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 the following:

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

Answer 3

 $(function() { $('input[name="datetimepicker"]').datetimepicker({ defaultDate: new Date() }).on('dp.change',function(event){ $('#newDateSpan').html("New Date: " + event.date.format('lll')); $('#oldDateSpan').html("Old Date: " + event.oldDate.format('lll')); }); }); 

 <link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://momentjs.com/downloads/moment.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> <div class="container"> <div class="col-xs-12"> <input name="datetimepicker" /> <p><span id="newDateSpan"></span><br><span id="oldDateSpan"></span></p> </div> </div> 

Answer 4

Here is my code for this:

 $('#date-daily').datepicker().on('changeDate', function(e) { //$('#other-input').val(e.format(0,"dd/mm/yyyy")); //alert(e.date); //alert(e.format(0,"dd/mm/yyyy")); //console.log(e.date); }); 

Just uncomment the one you prefer. The first option changes the value of another input element. The second warns the date with the default datepicker format. The third alerts the date with your own custom format. The last option logs (default date date).

It is your choice to use e.date, e.dates (for entering multiple data) or e.format (...).

more information here

Answer 5

 $(document).ready(function(){ $("#dateFrom").datepicker({ todayBtn: 1, autoclose: true, }).on('changeDate', function (selected) { var minDate = new Date(selected.date.valueOf()); $('#dateTo').datepicker('setStartDate', minDate); }); $("#dateTo").datepicker({ todayBtn: 1, autoclose: true,}) ; }); 

Answer 6

Based on the example of Irwin Dominin, I created 2 examples that support insertion and pressed Enter.

This works in Chrome: http://jsfiddle.net/lhernand/0a8woLev/

 $(document).ready(function() { $('#date-daily').datepicker({ format: 'dd/mm/yyyy', assumeNearbyYear: true, autoclose: true, orientation: 'bottom right', todayHighlight: true, keyboardNavigation: false }) /* On 'paste' -> loses focus, hide calendar and trigger 'change' */ .on('paste', function(e) { $(this).blur(); $('#date-daily').datepicker('hide'); }) /* On 'enter' keypress -> loses focus and trigger 'change' */ .on('keydown', function(e) { if (e.which === 13) { console.log('enter'); $(this).blur(); } }) .change(function(e) { console.log('change'); $('#stdout').append($('#date-daily').val() + ' change\n'); }); }); 

But not in IE, so I created another example for IE11: https://jsbin.com/timarum/14/edit?html,js,console,output

 $(document).ready(function() { $('#date-daily').datepicker({ format: 'dd/mm/yyyy', assumeNearbyYear: true, autoclose: true, orientation: 'bottom right', todayHighlight: true, keyboardNavigation: false }) // OnEnter -> lose focus .on('keydown', function(e) { if (e.which === 13){ $(this).blur(); } }) // onPaste -> hide and lose focus .on('keyup', function(e) { if (e.which === 86){ $(this).blur(); $(this).datepicker('hide'); } }) .change(function(e) { $('#stdout').append($('#date-daily').val() + ' change\n'); }); }); 

If the last example still does not work in IE11, try to split the setup:

 // DatePicker setup $('.datepicker').datepicker({ format: 'dd/mm/yyyy', assumeNearbyYear: true, /* manually-entered dates with two-digit years, such as '5/1/15', will be parsed as '2015', not '15' */ autoclose: true, /* close the datepicker immediately when a date is selected */ orientation: 'bottom rigth', todayHighlight: true, /* today appears with a blue box */ keyboardNavigation: false /* select date only onClick. when true, is too difficult free typing */ }); 

And event handlers: (note, I am not using $('.datepicker').datepicker({ )

  // Smoker DataPicker behaviour $('#inputStoppedDate') // OnEnter -> lose focus .on('keydown', function (e) { if (e.which === 13){ $(this).blur(); } }) // onPaste -> hide and lose focus .on('keyup', function (e) { if (e.which === 86){ $(this).blur(); $(this).datepicker('hide'); } }) .change(function (e) { // do saomething }); 

Answer 7

You can use the onSelect event

  $("#date-daily").datepicker({ onSelect: function(dateText) { alert($('#dp3').val()); } }); 

It is called when the datepicker parameter is selected. The function receives the selected date as text and an instance of datepicker as parameters. this refers to the corresponding input field.

SEE HERE