Encountering an issue with the datetimepicker functionality in Bootstrap. There is a table with a list of items, each column having an input field for searching through the data. Specifically, I need to search within a date range for the "creationDate" field. To save space, I have an icon that displays a div with two inputs and datetimepicker when hovered over.
The code snippet for this section is as follows:
<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>
Encountering a problem where moving the mouse within the datetimepicker popup triggers a mouseleave event from the parent div, causing it to disappear and hindering date selection.