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});

  1. Simply open the bootstrap-datepicker.js
  2. find : var defaults = $.fn.datepicker.defaults
  3. set autoclose: true

Save and refresh your project and this should do.