4

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/

arop
  • 451
  • 1
  • 5
  • 11
  • @devlincarnate It solves the z-index problem (the datepicker shows in front of the popup) but I can not click on it – arop May 23 '16 at 20:47
  • 1
    can you set up a Fiddle demonstrating the problem? – devlin carnate May 23 '16 at 21:38
  • @devlincarnate here https://jsfiddle.net/6wy933zb/ – arop May 23 '16 at 23:18
  • @devlincarnate I edited the question. I still can't click on the datepicker on the fiddle I provided. When clicking on the datepicker, the actual click is clicking on the popup and not on the datepicker – arop May 24 '16 at 16:58

1 Answers1

0

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/

Wietse de Vries
  • 673
  • 7
  • 17