angular material md-datepicker not working in an ionic modal

问题

I am attempting to use an angular material md-datepicker within an ionic modal and am not having the ng-change event being fired when the datepicker is used and date is changed,the datepicker itself won't scroll, and doesn't seem clickable. When I have tried using the datepicker outside of the modal, all works correctly. What is going on here?

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

And here is the controller:

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

回答1:

This is because the angular material will append the calendar panel to document body rather than ionic modal. You can't see it when you are in ionic modal and the calendar is outside the modal. The solution is to hack the angular-material.js.

First make a div in your ionic modal like:

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

Then you need go to angular-material.js (not min). Search for:

 document.body.appendChild(calendarPane);

And replace it with your own area like:

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

You will see your calendar in the modal. It will still be a little weird, but it's working. You need to fight with ionic css to make it look decent. Also to make sure your js and css version match

CSS like:

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

来源：https://stackoverflow.com/questions/36534630/angular-material-md-datepicker-not-working-in-an-ionic-modal

标签

datepicker

ionic-framework

modal-dialog

angular-material