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

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

Answer 2

For datetime picker

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

Answer 3

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.

Answer 4

I got a perfect solution:

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

Answer 5

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

switchOnClick: true

Answer 6

In bootstrap 4 use "autoHide : true"

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