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-dd-yyyy',
    startDate: '-15d',
    autoclose: true,
    endDate: '+0d' // there's no convenient "right now" notation yet
});

Any help would be appreciated.

Answer 1

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 2

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 3

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

Answer 4

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 5

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

Answer 6

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 7

In bootstrap 4 use "autoHide : true"

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

Answer 8

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

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

Answer 9

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

Answer 10

I got a perfect solution:

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

Answer 11

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

Answer 12

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

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

Answer 13

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

Answer 14

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 15

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

Answer 16

For datetime picker

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

Answer 17

Use this for datetimepicker, it works fine

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

Answer 18

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

switchOnClick: true