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 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/
Try this:
$("#dp3").on("dp.change", function(e) {
alert('hey');
});
Here is my code for that:
$('#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 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
$(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,}) ;
});
You can use onSelect
event
$("#date-daily").datepicker({
onSelect: function(dateText) {
alert($('#dp3').val());
}
});
It is Called when the datepicker is selected. The function receives the
selected date as text and the datepicker instance as parameters. this
refers to the associated input field.
SEE HERE