UI Bootstrap Datepicker Popup not working with Modal and ControllerAs

Question

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';
});

sheilak · Accepted Answer · 2015-10-21 20:09:30Z

5

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

answered Oct 21, 2015 at 20:09

sheilak

5,8737 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

phagento Over a year ago

Just what I needed! (y)

Collectives™ on Stack Overflow

UI Bootstrap Datepicker Popup not working with Modal and ControllerAs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related