Datepicker in Angular ui modal not opening

Question

I have a datepicker within a form in my modal. The datepicker is not opening no matter what I try. My code is :

   //In my parent controller - Called on button click
    $scope.openModal = function(indx){
        var modalInstance = $modal.open({
            animation:true,
            templateUrl:'myModal.html',
            controller: 'MyModalController'
        });

    };

  //In MyModalController
  $scope.open = function(){
          $scope.opened = true;
          console.log('Opened  is  : ' + $scope.opened);
      };

 //Modal view file myModal.html
 <input type="text" class="form-control" datepicker-popup="dd.MMMM.yyyy" ng-model="obj.startDate" is-open="$parent.opened" min-date="minDate" max-date="'2015-06-22'" close-text="Close" />
     <span class="input-group-btn">
     <button type="button" class="btn btn-default" ng-click="open(evt)">Close</button>
     </span>

This question has been asked before, but the solutions given are not working for me. I have already tried everything suggested here:

ui.bootstrap.datepicker is-open not working in modal

https://github.com/angular-ui/bootstrap/issues/2307

Answer 1

Add $event.preventDefault() and $event.stopPropagation() to your open function in your controller and make sure to pass the $event to the open function in the ng-click:

  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

and in your view:

<button type="button" class="btn btn-default" ng-click="open($event)">Close</button>

Run the code snippet to see a working demo:

var app = angular.module('demo', ['ui.bootstrap', 'ngAnimate']);

app.controller('MainCtrl', ['$scope', '$modal', function($scope, $modal){

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl'
    });
  
  };
  
}]);

app.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance) {
  
  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
}]);

@import url("//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css");

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>

<div ng-app="demo">
  <div ng-controller="MainCtrl" class="container">
    <button class="btn btn-default" ng-click="open()">Open Modal</button>
  </div>
  
  
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3 class="modal-title">Modal with a DatePicker</h3>
    </div>
    <div class="modal-body">
       <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control" datepicker-popup="shortDate" ng-model="dt" is-open="opened"  />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>   
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
    </div>
  </script>
  
  
</div>