设置 AngularJS UI Bootstrap 日期选择器时无法设置未定义的 属性 'date'

Question

请考虑这个Plunk。

我有这个代码来设置日期选择器（基本上是 UI Bootstrap 的（非常小的修改）逐字复制粘贴）。

我不需要所有提供的功能，所以它被精简了一点。

<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>

在控制器中定义：

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";
    }]);

当 运行 Plunk 时，会导致控制台出现以下错误 (Chrome F12):

TypeError: Cannot set property 'date' of undefined

完整消息见下文。

据我所知，这个 属性 date 不是我设置的，所以它一定是 DatePicker 的内部工作出了问题。

知道如何解决这个问题吗？

完全错误，但在 Plunk 中查看时看起来更好。

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

基本上您需要更新 angular 版本才能使用最新的 1.3.x

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

Demo Plunkr

Answer 2

正如我从您的 post 那里得知的那样，您无法 select 从日期选择器中获取日期，或者点击日历图标时日期选择器未打开。

这是因为您使用的 angular-bootsrap-ui 版本与您在代码中使用的 angular js 版本不兼容。

您应该使用兼容的版本。

通过下面的 link 进行 plunker 演示

Plunker Demo