Cannot set property 'date' of undefined when setting up AngularJS UI Bootstrap Datepicker

Question

Please consider this Plunk.

I have this code to set up the datepicker (basically a (very minorly modified) verbatim copy paste from UI Bootstrap).

I don't need all of the provided functionality, so it's stripped down a bit.

<div class="input-group">
  <input type="text"
         class="form-control"
         uib-datepicker-popup="{{format}}"
         ng-model="today"
         is-open="status.opened"
         min-date="minDate"
         max-date="maxDate"
         datepicker-options="dateOptions"
         ng-required="true" 
         close-text="Close" />
  <span class="input-group-btn">
      <button type="button" 
      class="btn btn-default" 
      ng-click="open($event)">
        <i class="fa fa-calendar"></i>
      </button>
  </span>
</div>

With this defined in the controller:

app.controller("myController", [
      "$scope",
      "$http",
      function($scope, $http){
        var self = {};

        $scope.today = new Date();

        $scope.status = {
            opened: false
        };

        $scope.open = function ($event) {
            $scope.status.opened = true;
        };

        $scope.dateFormat = "dd/mm/yyyy";
    }]);

When running the Plunk, that results in the following error in console (Chrome F12):

TypeError: Cannot set property 'date' of undefined

See further below for the full message.

As far as I can tell, this property date is not something I'm setting, so it must be something going wrong with the innerworkings of the DatePicker.

Any idea how to fix this?

Full error as promised, looks better when viewed in the Plunk though.

TypeError: Cannot set property 'date' of undefined at init (https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.min.js:9:3230) at link (https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.min.js:9:4936) at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:58:185 at W (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:49:141) at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:42:268) at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:42:285) at W (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:49:82) at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:42:268) at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:42:285) at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:41:459 (anonymous function) @ angular.js:9383(anonymous function) @ angular.js:6825W @ angular.js:6215f @ angular.js:5622f @ angular.js:5625W @ angular.js:6206f @ angular.js:5622f @ angular.js:5625(anonymous function) @ angular.js:5527(anonymous function) @ angular.js:1301h.$eval @ angular.js:11906h.$apply @ angular.js:12006(anonymous function) @ angular.js:1299d @ angular.js:3697Xb.c @ angular.js:1297Xb @ angular.js:1311Rc @ angular.js:1260(anonymous function) @ angular.js:20534a @ angular.js:2339(anonymous function) @ angular.js:2610q @ angular.js:309Xc.c @ angular.js:2609

Answer 1

As I am getting from your post, You are not able to select date from date picker or the datepicker is not opening on click of calender icon.

This is because the version you are using of angular-bootsrap-ui is not compatible with the version of angular js you were using in your code.

You should have to use compatible versions.

Go through the below link for plunker demo

Plunker Demo

Answer 2

Basically you need to updated you angular version to use latest 1.3.x

Look at Dependency required to have angular-ui-bootstrap.

Demo Plunkr