Bootstrap datepicker hide after selection
How do I hide the calendar after a date is selected? Is there a specific function that I can use? My code below:
$('#dp1').datepicker({
format: 'mm-dd-yyyy',
startDate: '-15d',
autoclose: true,
endDate: '+0d' // there's no convenient "right now" notation yet
});
Any help would be appreciated.
You can use event changedate()
to keep track of when the date is changed together with datepicker('hide')
method to hide the datepicker
after making selection:
$('yourpickerid').on('changeDate', function(ev){
$(this).datepicker('hide');
});
Demo
UPDATE
This was the bug with autoclose: true
. This bug was fixed in latest master. SEE THE COMMIT. Get the latest code from GitHub
If it's any help to anyone, the Version 2.0 of the bootstrap datepicker no longer works with the accepted answer.
Here's how I got it working on mine:
$('yourpickerid').datepicker({
format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
$(this).datepicker('hide');
});
See http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate
$('#input').datepicker({autoclose:true});
- Simply open the
bootstrap-datepicker.js
- find :
var defaults = $.fn.datepicker.defaults
- set
autoclose: true
Save and refresh your project and this should do.