jquery ui datepickerでイオニックポップアップ

Question

私は私のイオンアプリでjquery UI datepickerウィジェットを使用しています。

イオンポップアップで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の日付ピッカー：http://api.jqueryui.com/datepicker/

[EDIT]

私は

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

を追加することによって、バックグラウンドの問題に登場する日付ピッカーを解決

を日付ピッカー入力に追加します。しかし、私はここでhttps://jsfiddle.net/6wy933zb/

Answer 1

わからない、なぜそれが起こるが、あなたは

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

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