ブートストラップデートピッカーの問題は、角のマウスで

です。ブートストラップ日付ピッカー&角度を使用しています。ブートストラップデートピッカーの問題は、角のマウスで

マウスのホバー上にのみドロップダウンメニュー/フォームがあります。ドロップダウンメニューには、ブートストラップ日付ピッカーが含まれています。問題は、ユーザーが日付ピッカーのカレンダーにカーソルを合わせると、下にあるメニューが消えることです。希望の動作は、両方のオブジェクト

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

をする方法を提案して下さい同じことを達成する

出典

2016-08-02 user2692032

私は私にunde 100％に質問を立てたが、カレンダーはonclickを開き、入力をクリックしてぼかしで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>

私はそれがもっとハックのようだと知っています。 datepickerクラスのdivが表示されている場合は、DOMを観察することも意見になります。私はあなたのCSSを想定してい

出典

2016-08-02 14:34:17

はあなたよ、あなたはNAV上でホバリング停止したときに、この

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

のようなものだから、メニュー自体

.menu:hover { 
    display: block; 
}

その方法に同じを追加するに見えますまだメニューを表示できるようにすることがあります。

出典

2016-08-02 14:39:06 amflare

ブートストラップデートピッカーの問題は、角のマウスで

答えて

関連する問題