Bootstrap Date Picker Problem mit eckigen Maus über

Ich benutze bootstrap Datumsauswahl & Angular.Bootstrap Date Picker Problem mit eckigen Maus über

Ich habe ein Dropdown-Menü/Formular nur mit der Maus Hover. Das Dropdown-Menü enthält die Bootstrap-Datumsauswahl. Das Problem ist, wenn Benutzer den Mauszeiger über den Kalender der Datumsauswahl bewegen, verschwindet das zugrunde liegende Menü.

Das gewünschte Verhalten bis Benutzer Maus zeigt den Kalender und das darunter liegende Menü zu halten, wäre aus beiden Objekte

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>

Beispiel: http://plnkr.co/edit/CvQSWLGntsbVIoJASgqy?p=preview

Bitte vorschlagen Methode erreiche das gleiche

Quelle

2016-08-02 user2692032

Ich bin nicht sicher, dass ich unde habe Die Frage wurde zu 100 Prozent verstanden, aber der Kalender öffnet sich, wenn Sie auf die Eingabe klicken und bei Unschärfe auf false setzen.

So etwas sollte funktionieren.

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>

Ich weiß, es ist mehr wie ein Hack. Das DOM zu beobachten, wenn ein div mit dem Klassendatpicker erscheint, wäre auch eine Meinung.

Quelle

2016-08-02 14:34:17

ich CSS gehe mal davon aus sieht so etwas wie dieses

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

So das gleiche selbst

.menu:hover { 
    display: block; 
}

Auf diese Weise zum Menü hinzufügen, wenn Sie auf der nav stoppen schweben, werden Sie tun Sie immer noch etwas, das das Menü sichtbar macht.

Quelle

2016-08-02 14:39:06 amflare

Bootstrap Date Picker Problem mit eckigen Maus über

Antwort

Verwandte Themen