Bootstrap datepicker hide after selection

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.

If you're looking to override the behavior of the calendar in general, globally, try editing the Datepicker function (in my example it was line 82),

from

 this.autoclose = false;

to

 this.autoclose = true;

Worked fine for me, as I wanted to have all my calendar instances behave the same.

The problem can be stopped, blocking hide event for input element by this linese:

var your_options = { ... };
$('.datetimepicker').datetimepicker(your_options).on('hide', function (e) {
 e.preventDefault();
 e.stopPropagation();
});

Close datetimepicker when date select(datetimepicker show date with time)

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

In bootstrap 4 use "autoHide : true"

$('#datepicker1').datepicker({
 autoHide: true,
 format: 'mm-yyyy',
 endDate: new Date()
});

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

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

Having problem with clock still showing even if I i wrote format: 'YYYY-MM-DD',

I hade to set pickTime: false and after change->hide I hade to focus->show

$('#VBS_RequiredDeliveryDate').datetimepicker({
 format: 'YYYY-MM-DD',
 pickTime: false
});
$('#VBS_RequiredDeliveryDate').on('change', function(){
 $('.datepicker').hide();
});
$('#VBS_RequiredDeliveryDate').on('focus', function(){
 $('.datepicker').show();
});

I got a perfect solution:

$('#Date_of_Birth').datepicker().on('changeDate', function (e) {
 if(e.viewMode === 'days')
 $(this).blur();
});

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

I changed to datetimepicker and format to 'DD/MM/YYYY'

$("id").datetimepicker({
 format: 'DD/MM/YYYY',
}).on('changeDate', function() {
 $('.datepicker').hide();
});

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
 }

For datetime picker

$('yourpickerid').datetimepicker({
 format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
 $(this).datetimepicker('hide');
});

Use this for datetimepicker, it works fine

$('#Date').data("DateTimePicker").hide();

Haven't seen this mentioned, but this is what fixed it for me:

switchOnClick: true

• jquery
• twitter-bootstrap
• datepicker