jqueryjquery-uiionic-frameworkdatepickerionic-popup

Ionic popup with jquery ui datepicker


I'm using jquery UI datepicker widget in my ionic app.

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

popup with datepicker

Any ideas on how to make the datepicker directive show in front of the popup, so that I can select the 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 ionic popup code:

    $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 solved the datepicker appearing in the background problem by adding

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

to the datepicker input. However, I am unable to click on the datepicker as demonstrated here https://jsfiddle.net/6wy933zb/


Solution

  • Not sure why it happens, but you can fix it by adding pointer-events:auto; to .ui-datepicker

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

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