[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:

    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)

    format: 'dd/mm/yyyy',
    autoclose: true,
Respondent: Chaitanya K

Solution #2:

Try this:

.on('changeDate', function(ev){                 


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

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)
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,

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

Look out this,

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) {
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.find( ||
                    )) {
                        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 () {

            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() {
    }, 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