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?
All others answers are related to
jQuery UI datepicker
, but the question is aboutbootstrap-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 theonChange
handler:Example:
Here is a working fiddle: http://jsfiddle.net/IrvinDominin/frjhgpn8/
Here is my code for that:
Just uncomment the one you prefer. The first option changes the value of other input element. The second one alerts the date with datepicker default format. The third one alerts the date with your own custom format. The last option outputs to log (default format date).
It's your choice to use the e.date , e.dates (for múltiple date input) or e.format(...).
here some more info
Try this:
You can use
onSelect
eventSEE HERE