Ионное всплывающее окно с jquery ui datepicker

Question

Я использую jquery UI datepicker widget в своем ионном приложении.

Я хочу использовать datepicker в ионном всплывающем окне, но я не могу выбрать дату, потому что всплывающее окно перед ним.

Любые идеи о том, как сделать Datepicker директивы шоу перед всплывающим окном, так что я могу выбрать дату?

Моя DatePicker директива:

.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(); 
     } 
     }); 
    }); 
    } 
} 

});

Мой ионный Всплывающий код:

$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]

Я решил DatePicker, появляющийся в фоне проблеме пути добавления

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

на вход datepicker. Тем не менее, я не могу нажать на DatePicker, как показано здесь https://jsfiddle.net/6wy933zb/

Answer 1

Не знаю, почему это происходит, но вы можете это исправить, добавив pointer-events:auto; к .ui-Datepicker

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

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