Bootstrap datepicker not close automatically after picking a date

Question

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 u

Answer 1

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.

Answer 2

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

Answer 3

This is working for me.

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

Answer 4

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.

Answer 5

//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)
            }]
        ];
    },

Answer 6

Try this:

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