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.

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

In bootstrap 4 use "autoHide : true"

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

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

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

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

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
 }

I got a perfect solution:

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

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

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 changed to datetimepicker and format to 'DD/MM/YYYY'

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

For datetime picker

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

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

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