带有角度鼠标的引导日期选择器问题答案

【问题标题】：Bootstrap date picker issue with angular mouse over带有角度鼠标的引导日期选择器问题
【发布时间】：2016-08-02 22:39:06
【问题描述】：

我正在使用引导日期选择器和 Angular。

我只有鼠标悬停时的下拉菜单/表单。下拉菜单包含引导日期选择器。问题是当用户将鼠标悬停在日期选择器日历上时，底层菜单会消失。

期望的行为是继续显示日历和基础菜单，直到用户将鼠标移出两个对象

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.formMenu = false;
    $('#dateInput').datepicker({
			    format: "dd MM yyyy",
			    
			    autoclose: true,
			    todayHighlight: true
			});
});

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="angular.js@1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    
    
    <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <div  ng-mouseover="formMenu=true" ng-mouseleave="formMenu=false">
        Dropdown
      </div>
      <div ng-show="formMenu" ng-mouseover="formMenu=true" ng-mouseleave="formMenu=false">
        <label>This should not disappear on calendar hover</label>
        
        <input type="text" class="date-picker date-filter text-left" id="dateInput">
      </div>
    </div>
    
  </body>

</html>

示例：http://plnkr.co/edit/CvQSWLGntsbVIoJASgqy?p=preview

请提出实现相同的方法

【问题讨论】：

标签： javascript jquery angularjs twitter-bootstrap bootstrap-datepicker

【解决方案1】：

我不确定我是否 100% 理解了这个问题，但是日历会在单击时打开，因此如果您单击输入并将其设置为 false 模糊时，您可以将属性设置为 true。

这样的事情应该可以工作。

div ng-show="formMenu || datepickerHover" ng-mouseover="formMenu=true" ng-mouseleave="formMenu=false">
    <label>This should not disappear on calendar hover</label>

    <input type="text" class="date-picker date-filter text-left" id="dateInput" ng-click="datepickerHover = true" ng-blur="datepickerHover = false">
  </div>

我知道这更像是一个 hack。如果出现带有类 datepicker 的 div 来观察 DOM 也是一种意见。

【讨论】：

【解决方案2】：

我假设你的 CSS 看起来像这样

.nav:hover .menu {
  display: block;
}

所以在菜单本身添加相同的内容

.menu:hover {
  display: block;
}

这样，当您停止将鼠标悬停在导航上时，您仍会做一些使菜单可见的操作。

【讨论】：