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?
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