在鼠标悬停时可见的 div 中引导 datetimepicker

Question

我对 bootstrap 中的 datetimepicker 有疑问。 我有一个包含项目列表的表，在每一列上，我都有一个输入，可以对项目的每个字段进行一些搜索。 我有一个字段“creationDate”，我希望能够搜索两个日期之间的日期，因此为了节省空间，我有一个该字段的图标，它在 ng-mouseenter 上显示一个 div，其中包含带有 datetimepicker 的 2 个输入。

这部分的代码是这样的：

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

问题是当我在datetimepicker弹出窗口中移动鼠标时，它被认为是从div中离开的，所以它消失了，我无法选择日期。

Answer 1

好的，问题是当你将鼠标悬停在一个 id/class 上时，它会隐藏你的弹出窗口——试试这个：

    $(document).on("mouseover", "#nameOfyourField", function (e) {           
        //Do whatever you want to do
    });

现在，如果您单击网页正文中的某个位置，弹出窗口将消失：

        $(document).on("click", "body", function () {
        $("#nameOfyourField").hide();
    });

我希望这是您正在寻找的：