关于javascript:设置AngularJS UI Bootstrap Datepicker时无法设置undefined的属性’date’

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

请考虑一下这次抢劫。

我有这个代码来设置日期选择器(基本上是一个(非常微小的修改)从UI引导中逐字复制粘贴)。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  <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">
      </button>
  </span>

在控制器中定义此项:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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的内部工作出了问题。

知道怎么解决这个问题吗?

完全错误,正如承诺的那样,但当在突袭中查看时看起来更好。

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


基本上,你需要更新你的角度版本,以使用最新的1.3.x

看看有角度的用户界面引导所需要的依赖关系。

演示插件


正如我从您的帖子中得到的,您无法从日期选取器中选择日期,或者单击日历图标时日期选取器未打开。

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

您应该使用兼容的版本。

通过以下链接进行Pluker演示

柱塞演示