Bootstrap datetimepicker in a div visible on mouseover - css

Question

I have an issue with the datetimepicker from bootstrap.
I have a table containing a list of items, and on each column, I have an input to make some search on each field from the items.
I have a field "creationDate" and I want to be able to search a date between two dates, so to take less space, i have an icon for this field which shows a div on ng-mouseenter which contains the 2 inputs with datetimepicker.
The code of this part is like this :
<td>
<img src="/assets/css/images/unroll-icon.png" ng-mouseenter="showSelectCreationDate()" />
<div class="selectCreationDate" id="selectCreationDate" ng-mouseleave="hideSelectCreationDate()">
Date min. :
<input type='text' data-date-format="DD/MM/YYYY" class="form-control" id='inputCreationDateMin' />
<br />Date max. :
<input type='text' data-date-format="DD/MM/YYYY" class="form-control" id='inputCreationDateMax' />
<script type="application/javascript">
$(function () {
$('#inputCreationDateMin').datetimepicker({
pickTime: false
});
});
$(function () {
$('#inputCreationDateMax').datetimepicker({
pickTime: false
});
});
</script>
</div>
</td>
The problem is that when I move my mouse in the datetimepicker popup, it is considered as a mouseleave from the div, so it disappears and I can't select the date.

Answer 1

Ok so the problem is that when you mouse over a id/class it hides your popup- try this:
$(document).on("mouseover", "#nameOfyourField", function (e) {
//Do whatever you want to do
});
Now if you click somewhere in the body of your web-page the popup will go away:
$(document).on("click", "body", function () {
$("#nameOfyourField").hide();
});
I hope this is what you're looking for: