Bootstrap-datepicker: Datepicker doesn't hide after selecting date

[geaden]

When I select date datepicker is still on my screen, when I click anywhere on page it disappears. I tried to use 'changeDate', but when I click today button datepicker disappears with no date selection

[geaden]

Added autoclose option, but have the same behaviour as with changeDate event. When click today button it disappears with selecting not today date. jQuery datepicker plugin works better.

[digitalfrost]

Hi Geaden,
Try something like the code below:

        $('.datepicker').datepicker().on('changeDate', function(){
          $(this).blur();
        }); 

I find that using blur() is nicer than just hiding the datepicker as the user can just click on the field again to get the datepicker back if they have imputted incorrect data

[eternicode]

When click today button it disappears with selecting not today date.

Yes, this was a bug with autoclose: true and todayBtn: true. Not so bad with todayBtn: 'linked', as the actual date would be changed before the picker was hidden. Fixed in latest master, bf1b2c820076e3e11b0199abe43d00ddcc645995

[geaden]

Thanks, that worked for me

[Jarvizx]

look. https://github.com/eternicode/bootstrap-datepicker/issues/500#issuecomment-34662552

[sarveshkushwaha]

yuhhu..this $(this).blur(); worked for me ... thanks :) :+1:

[raghuveerweb]

if we are using this kind of code then what is the use of autoclose property
$('.datepicker').datepicker().on('changeDate', function(){
$(this).blur();
});

[ror-infobeans]

Best way to hide calender after date selected is :

$( document ).ready(function() {
  $('.view-calender').datepicker({ format: "yyyy-mm-dd" }).on('changeDate', function(ev){
    $(this).datepicker('hide');
});
});

[nomoregithub]

Instead of adding a new event handler after every single initiation, you can change the main js file by adding "this.hide();" to the end of click function as below:

    click: function(e) {
        e.stopPropagation();
        e.preventDefault();
        var target = $(e.target).closest('span, td, th');
        if (target.length === 1) {
            switch(target[0].nodeName.toLowerCase()) {
                            .......
                    }
                    this.close();  //  Here
            }

[fernando-nog]

For me, this was the solution:

$('selector').datepicker().on('changeDate',function(e) {
    $('selector').datepicker('hide');
});

[pjammer]

@fernandoGN thanks! worked for me in the latests jquery and bootstrap-datepicker

[divinedragon]

Anybody who is struggling with datepicker not closing when the date is selected in a modal window, can use the following fix.
Here is the issue demo on jsFiddle - http://jsfiddle.net/R9AT2/1/
Here is the fix demo on jsFiddle - http://jsfiddle.net/divinedragon/R9AT2/87/

The trick is to set the focus back to modal div.

    $("#datepicker").datepicker({
        onSelect: function() {
            $("#dialog").focus();
        }
    });
    $("#dialog").dialog({
        modal: true
    });

[sergiopedraza]

@divinedragon your fix does not work in IE. The datepicker is always present

[hirenpatel29]

Hello EveryOne,

I have made bootstrap 4 datetimepicker control in asp.net c#. When I am using date only in format then my datetime picker works perfectly but when I added in time format with date then my datetime picker is not closing after selecting datetime. I have tried all suggestions mentioned above. Please help me out.

bootstrap-datetimepicker.min.txt

ascx page :

""<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DateTimePicker.ascx.cs" Inherits="Assets_UserControl_DateTimePicker" %>""
"

Date :

ascx.cs page
private string _sFormat = "MM/DD/YYYY HH:mm:ss";

public string sFormat
{
    get { return _sFormat; }
    set { _sFormat = value; }
}

Page Load :
string s = @"";
//string s = @"";
//string s = @"";

    Page.ClientScript.RegisterClientScriptBlock(GetType(), "dtsc_" + sTextBoxID, s, false);
    if (!string.IsNullOrEmpty(Attributes["placeholder"])) TextBox1.Attributes["placeholder"] = Attributes["placeholder"];
    if (!String.IsNullOrEmpty(sLabelText))
    {
        divPrepend.Visible = true;
        lblPrepend.InnerText = sLabelText;
    }