CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrapbootstrap-modalbootstrap-datepicker
Spencer
Spencer

Reputation: 2245

UI Bootstrap Datepicker Popup not working with Modal and ControllerAs

I've seen a similar question asked around here and the answer seems to be that the variable managing whether or not the datepicker is opened should be on the parent scope. I thought I had done that here, but it's still not working. The difference between my code and all the others I've seen is that I'm using controller as and everyone else is using $scope. How should this be working with controller as?

Full Plnkr Here

Here is the main page

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');    </script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js" data-semver="1.4.6"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap-tpls.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl as main">
    <button class="btn btn-primary" ng-click="main.openModal()">Open Modal</button>
  </body>

</html>

Here is the modal

<div class="modal-header">
  {{modal.title}}
</div>
<div class="modal-body">

  <p class="input-group">
    <input type="date" 
        class="form-control" 
        ng-model="modal.dt" 
        is-open="main.opened" 
        close-text="Close" />

    <span class="input-group-btn">
      <button type="button" class="btn btn-default" ng-click="main.opened = true">
        <i class="glyphicon glyphicon-calendar"></i>
      </button>
    </span>
  </p>

</div>

Here are the controllers

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

app.controller('MainCtrl', function($modal) {
var main = this;

  main.openModal = function() {
    var modalInstance = $modal.open({
      templateUrl: 'modal.html',
      controller: 'ModalInstanceCtrl as modal',
      size: 'sm'
    });
  };
});


app.controller('ModalInstanceCtrl', function($modalInstance) {
    var modal = this;

    modal.title = 'Modal Title';
});

Upvotes: 2

Views: 2999

Answers (1)

sheilak
sheilak

Reputation: 5873

You've forgotten the datepicker-popup attribute on the input element:

<input type="date" datepicker-popup
            class="form-control" 
            ng-model="main.dt" 
            is-open="main.opened" 
            close-text="Close" />

Also, you need to add the following code into your ng-click in order to stop the click event from propagating to the button's parent elements (clicking the parent div would immediately close the datepicker popup):

$event.preventDefault(); $event.stopPropagation();

e.g. 

ng-click="$event.preventDefault(); $event.stopPropagation(); main.opened = true"

or put it into a method if you prefer.

Updated Plunker

Upvotes: 5

Related Questions