Ion popup with jquery ui datepicker

Question

I am using jquery UI datepicker widget in my ionic application.

I want to use a datepicker in an ionic popup, but I cannot select a date because the popup is in front of it.

Any ideas on how to get the datepicker directive to show in front of the popup so I can select a date?

My datepicker directive:

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

});

My ion popup is:

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

I decided that datepicker appears in the background task by adding

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

input datepicker. However, I cannot click on datepicker as shown here https://jsfiddle.net/6wy933zb/

Answer 1

, , , pointer-events:auto; .ui-datepicker

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

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