Ionic Popup mit jquery ui datepicker

Question

Ich benutze jquery UI Datepicker Widget in meiner ionischen App.

Ich möchte den Datepicker in einem ionischen Popup verwenden, aber ich kann das Datum nicht auswählen, weil das Popup davor ist.

Alle Ideen, wie die Datepicker Richtlinie Show vor dem Popup zu machen, so dass ich das Datum auswählen kann?

Meine picker Richtlinie:

.directive('datepicker', function() { 
return { 
    require : 'ngModel', 
    link : function (scope, element, attrs, ngModelCtrl) { 
    $(function(){ 
     $(element).datepicker({ 
     changeYear:true, 
     changeMonth:true, 
     dateFormat:'yy-mm-dd', 
     onSelect:function (dateText, inst) { 
      ngModelCtrl.$setViewValue(dateText); 
      scope.$apply(); 
     } 
     }); 
    }); 
    } 
} 

});

Mein ionischen Popup-Code:

$scope.showPopupExitDate = function() { 
    var templateDate = '<label class="item item-input">' + 
    '<span class="input-label">Data</span>'+ 
    '<input datepicker type="text" onkeydown="return false" ng-model="profile.exitDate">'+ 
    '</label>'; 

    // An elaborate, custom popup 
    var myPopup = $ionicPopup.show({ 
    template: templateDate, 
    title: 'Data de saída', 
    subTitle: '(Esta ação é irreversível!)', 
    scope: $scope, 
    buttons: [ 
     { text: 'Cancelar' }, 
     { 
     text: '<b>Guardar</b>', 
     type: 'button-energized', 
     onTap: function(e) { 
      if (!$scope.profile.exitDate) { 
      //don't allow the user to close unless he enters exit date 
      e.preventDefault(); 
      } else { 
      return $scope.profile.exitDate; 
      } 
     } 
     } 
    ] 
    }); 

    myPopup.then(function(res) { 
    console.log('Tapped!', res); 
    if(res != undefined) { 
     $scope.update_profile(); 
    } else { 

    } 
    }); 
}; 

jQuery UI Datepicker: http://api.jqueryui.com/datepicker/

[EDIT]

ich die Datepicker gelöst im Hintergrund Problem erscheinen von

style="position: relative; z-index: 100000 !important;" 

Hinzufügen

an den Datepicker-Eingang. Allerdings bin ich nicht in der Lage auf dem Datepicker klicken, wie hier demonstriert https://jsfiddle.net/6wy933zb/

Answer 1

nicht sicher, warum es passiert, aber man kann es beheben, indem pointer-events:auto; Zugabe .ui-picker

.ui-datepicker { 
    pointer-events: auto; 
} 

https://jsfiddle.net/wietsedevries/6wy933zb/1/