only - Ventana emergente iónica con jquery ui datepicker

jquery ui only datepicker

Question

Estoy usando el widget jquery UI datepicker en mi aplicación iónica.

Quiero usar Datepicker en una ventana emergente iónica, pero no puedo seleccionar la fecha porque la ventana emergente está delante de ella.

¿Alguna idea sobre cómo hacer que la directiva datepicker se muestre frente a la ventana emergente para que pueda seleccionar la fecha?

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

});

Mi código emergente iónico:

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

[EDITAR]

Resolví el datepicker que aparece en el problema de fondo añadiendo

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

a la entrada datepicker. Sin embargo, no puedo hacer clic en el marcador de fechas como se demuestra aquí https://jsfiddle.net/6wy933zb/

Answer 1

No estoy seguro de por qué sucede, pero puede solucionarlo agregando pointer-events:auto; para .ui-datepicker

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

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