0

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

2 Answers 2

3

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

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

2 Comments

Oh, that easy, fixed!
@Spikee Glad to help you..Thanks :)
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.