Question

[Solved] Bootstrap datepicker not close automatically after picking a date

I use the latest Bootstrap datepicker.js. All works fine except that when I pick a date from the drop down, it does not automatically close it. I searched web and tried to use the following function in my javascript like the following:

 $('#selectDate').datepicker({
    autoclose: true
}).on('changeDate', function (ev) {
    (ev.viewMode == 'days') ? $(this).datepicker('hide') : '';      
});

but when i use Google Chrome Dev tools, I realized that ev.viewmode was undefined. I am not sure how to move forward.

Solution #1:

I added autoclose: true, (with semi comma at the end and it works)

 $('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    todayHighlight:'TRUE',
    autoclose: true,
})
Respondent: Chaitanya K

Solution #2:

Try this:

$('#selectDate').datepicker()
.on('changeDate', function(ev){                 
    $('#selectDate').datepicker('hide');
});

Update:

autoclose works fine when you use the updated version of datepicker present on github:

https://github.com/eternicode/bootstrap-datepicker

Respondent: Mukesh Chapagain

Solution #3:

None of the above worked for me, however overriding the datepicker default option worked like a charm, and is a one-liner:

$.fn.datepicker.defaults.autoclose = true;
Respondent: northernman

Solution #4:

Try this:

$('#selectDate').datepicker().on('changeDate', function(ev)
{                 
     $('.datepicker').hide();
});
Respondent: Ibrohim Ermatov

Solution #5:

If you have multiple textboxes for which you have applied datepicker, then old solution might cause problem,
Please try this instead,

$('.datepicker').datepicker({
     format: "dd/mm/yyyy",
     autoclose: true,
}).on('changeDate', function (ev) {
     $(this).datepicker('hide');
});

Look out this, https://github.com/eternicode/bootstrap-datepicker/issues/500

Note: Do not forget, we are using class selector of jquery, so you
need to apply datepicker class to your textbox.

Respondent: Aniket Bhansali

Solution #6:

  1. Simply open the bootstrap-datepicker.js
  2. find : var defaults = $.fn.datepicker.defaults
    (Line 1391 in my case)
  3. set autoclose: true

Save and refresh your project and this should do.

Respondent: user3615318

Solution #7:

This is working for me.

$(".date-picker").datepicker( {
    format: "yyyy-mm-dd",
}).on('change', function (ev) {
    $(this).datepicker('hide');
});
Respondent: Muzammil Hussain

Solution #8:

For me it turned out to be a typo in the bootstrap-datepicker documentation.
Instead of “autoclose: true”, it’s “autoClose: true”.

Hope it helps.

Respondent: Nick Verheijen

Solution #9:

//10000% work
Go to the bootstrap-datepicker.js file

Search for this:

'mousedown touchstart': $.proxy(function(e){
                    // Clicked outside the datepicker, hide it
                    if (!(
                        this.element.is(e.target) ||
                        this.element.find(e.target).length ||
                        this.picker.is(e.target) ||
                        this.picker.find(e.target).length
                    )) {
                        this.hide();  //remove this
                    }
                }, this)
            }]
        ];
    },
Respondent: doshi smit

Solution #10:

When you hover over the div with the class defaultdatepicker. The calendar control will appear. On Mouseleave it will dissapear.

 $(document).on("focus", ".defaultdatepicker", function () {

        $(this).datepicker({
            format: 'dd/mm/yyyy',
            todayHighlight: 'TRUE',
            autoClose: true,
        });

        $('#datepicker').css({ "opacity": "1" });
    });

    $('.defaultdatepicker').on('mouseleave', function () {
        $('.datepicker').fadeOut(function () {
            $('.formattedStartDate').attr('class', 'formattedStartDate');

            $('#datepicker').css({ "opacity": "0" });
        });
    });
Respondent: Tumelo Moropane

Solution #11:

Try this. It’s work for me.

<input data-auto-close="true" type="text" class="datepicker-here"/>
Respondent: Reshan

Solution #12:

This worked for me

$(".date-picker").change(function() { 
    setTimeout(function() {
        $(".date-picker").datepicker('hide'); 
        $(".date-picker").blur();
    }, 50);
});    
Respondent: amit badala

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy