0

부트 스트랩 날짜 선택 도구 & 각도를 사용하고 있습니다.이상 마우스로 부트 스트랩 날짜 선택 도구 문제

마우스를 올려 놓을 때만 드롭 다운 메뉴/양식이 있습니다. 드롭 다운 메뉴에는 부트 스트랩 날짜 선택 도구가 있습니다. 문제는 사용자가 날짜 선택기 달력 위로 마우스를 가져 가면 기본 메뉴가 사라지는 것입니다.

원하는 동작은 객체

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

 
    <head> 
 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <script data-require="[email protected]" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script> 
 
    <script data-require="[email protected]" 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

에 대한 방법을 제안하십시오 동일하게 달성하십시오

답변

1

나는 언데드를 가지고 있는지 확신하지 못합니다. 질문을 100 %로 올려 놓았지만 캘린더는 onclick을 열어 입력을 클릭하면 흐리게 표시 될 때 속성을 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> 

나는 그것이 해킹과 비슷하다는 것을 알고있다. datepicker 클래스가있는 div가 나타나면 DOM을 관찰하는 것도 의견이됩니다. 나는 당신의 CSS를 믿고있어

0

는거야, 당신은 탐색에 유혹 중지 할 때이

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

같은 그래서, 메뉴 자체

.menu:hover { 
    display: block; 
} 

그 방법에 동일하게 추가 보인다 여전히 메뉴를 볼 수있는 무언가를하고 있습니다.