角材料md-datepicker不工作在离子模式

我正在尝试使用离子模态内的角材料md-datepicker，并且在使用日期选择器并且日期改变时没有触发ng-change事件，日期选择器本身不会滚动，并且看起来不可点击。当我尝试使用模式外的日期选择器时，所有工作都正常。这里发生了什么？角材料md-datepicker不工作在离子模式

<script id="add-location-modal.html" type="text/ng-template"> 
    <ion-modal-view> 
<ion-content> 
    <md-content layout-padding> 
    <form name="myForm" style=""> 
     <md-datepicker ng-model="date" ng-change="updateDate(date)" md-placeholder="Date"></md-datepicker> 
    </form> 
    </md-content> 
</ion-content>

这里是控制器：

angular.module('myModule') 
    .controller('TripDetailsCtrl'['$scope','$rootScope','$stateParams','tripServices','tripLocationServices','$ionicModal', 
    function($scope,$rootScope,$stateParams,tripServices,tripLocationServices,$ionicModal){ 

$scope.trip = [],$scope.tripData = {}, $scope.addLocationModal, $scope.locationData = {},$scope.date; 

$scope.showAddLocationModal = function(){ 
    $scope.addLocationModal.show(); 
}; 

$scope.closeAddLocationModal = function(){ 
    $scope.addLocationModal.hide(); 
}; 

var initModal = function(){ 
    if(!$scope.addLocationModal){ 
    $ionicModal.fromTemplateUrl('add-location-modal.html', { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }).then(function(modal) { 
     $scope.addLocationModal = modal; 
    }); 
    } 
}; 


    initModal();

来源

2016-04-10 Brendan Moore

是否与日期选择是比模态下的z-index的问题？与我用CSS解决的ui-bootstrap模式和md-datepicker有相同的问题：'.md-datepicker-calendar-pane z-index：1151！important; }'。 –

这也跨越了我的想法，我绝对尝试修改z-index，但没有任何运气。我这样做时没有使用重要的标签，所以我可以尝试一下，但是，我的怀疑现在认为这与[Ionic的300ms点击延迟]有关（http://blog.ionic.io/hybrid -apps-and-the-the-the-curse-the-300ms-delay /） –

这是因为该角度材料将追加日历面板记录体，而不是离子态。当您处于离子模式并且日历不在模态中时，您无法看到它。解决方法是破解angular-material.js。

首先制作一个div在离子态，如：

<ion-modal-view class="datepickerModal"> 
     <ion-header-bar> 
     <h1 class="title">Select a date to view history</h1> 
     <div class="buttons"> 
      <button class="button button-calm" ng-click="closeDatepickerModal()">Close</button> 
     </div> 
     </ion-header-bar> 
     <ion-content> 
     <md-content> 
      <h4>Date-picker with min date and max date</h4> 
      <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate"></md-datepicker> 

      <!-- give the div an ID--> 
      <div id="ionicCalendar"></div> 
      <!--End --> 

     </md-content> 
     </ion-content> 
    </ion-modal-view>

然后，你需要去角material.js（未分）。搜索：

document.body.appendChild(calendarPane);

并用自己喜欢更换：

document.getElementById('ionicCalendar').appendChild(calendarPane);

你会看到在模日历。它仍然有点奇怪，但它的工作。你需要与离子CSS战斗，使它看起来体面。此外，以确保您的JS和CSS版本匹配

CSS一样：

.datepickerModal md-content{ 
    height:100%; 
} 
.datepickerModal .bar{ 
    background-color:#11c1f3; 
} 
.datepickerModal .bar h1.title{ 
    font-size:14px !important; 
}

来源

2016-05-18 21:24:30 Jaaaaaaay

如果你真的想在Ionic上有一个体面的日期选择器，你可以试试onezone datepicker。 – Jaaaaaaay

角材料md-datepicker不工作在离子模式

回答

相关问题