带 jquery ui 日期选择器的 Ionic 弹出窗口

Question

我在我的 ionic 应用程序中使用 jquery UI 日期选择器小部件。

我想在离子弹出窗口中使用日期选择器，但我无法select日期，因为弹出窗口在它前面。

关于如何使日期选择器指令显示在弹出窗口前面的任何想法，以便我可以 select 日期？

我的日期选择器指令：

.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/

[编辑]

我通过添加

解决了后台出现日期选择器的问题

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

到日期选择器输入。但是，我无法点击此处所示的日期选择器 https://jsfiddle.net/6wy933zb/

Answer 1

不确定为什么会发生，但您可以通过将 pointer-events:auto; 添加到 .ui-datepicker

来修复它

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

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

带 jquery ui 日期选择器的 Ionic 弹出窗口

Ionic popup with jquery ui datepicker

jquery

jquery-ui

ionic-framework

datepicker

ionic-popup