Close calendar (datetimepicker), when input text box is hidden and only have the button / input-group-addon

Question

I'm using Bootstrap Datetimepicker to have a calendar on my page and select days and hours.

This requires that I have an input-group. And I have set mine, like that:

<div id="dateChoose" class="form-group">
    <div class='input-group date' id='datetimepicker1'>
        <input type='hidden' style="border:none" class="form-control" />
        <span class="btn btn-primary input-group-addon ">
            <span class="glyphicon glyphicon-calendar">
            </span>
        </span>
    </div>
</div>

Once I didn't want the text box (just only a button to pickup a date) and once I wasn't able to add properly the funcionality of datetimepicker to a single button, I've decided to "mask" the input-group-addon as a button with some CSS, to look like another button, and to hide the text box ( type='hidden' ).

This (image) looks good, I think. But now, as I hid the <input> , when I click somewhere on the screen, the calendar, after opened, doesn't close.

How can I solve this, to close the calendar, when I click somewhere, as it would be, if text was not hidden?

Answer 1

Give your input calendar an id, then add the code below

$("#id").on("blur", function(e) { $(this).off("focus").datepicker("hide"); });

When you lose focus, your calendar should go away