Ionic アプリで jquery UI datepicker ウィジェットを使用しています。
イオンポップアップで日付ピッカーを使用したいのですが、ポップアップがその前にあるため、日付を選択できません。
日付を選択できるように、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();
}
});
});
}
}
});
私のイオンポップアップコード:
$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/に示されているように、日付ピッカーをクリックできません