Bootstrap datepicker hide after selection

Question

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-d         


        

Answer 1

$('.datepicker').datepicker({
    autoclose: true
}); 

Answer 2

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.

Answer 3

You can change source code, bootstrap-datepicker.js. Add this.hide(); like ne

  if (this.viewMode !== 0) {
    this.date = new Date(this.viewDate);
    this.element.trigger({
        type: 'changeDate',
        date: this.date,
        viewMode: DPGlobal.modes[this.viewMode].clsName
    });
    this.hide();//here
 }

Answer 4

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

Answer 5

$('yourpickerid').datetimepicker({
           pickTime: false
}).on('changeDate', function (e) {
           $(this).datetimepicker('hide');
});

Answer 6

At least in version 2.2.3 that I'm using, you must use autoClose instead of autoclose. Letter case matters.