无法设置属性'日期'在设置AngularJS UI引导日期选择器时未定义的

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

本文关键字:日期 设置 选择器 未定义 属性 AngularJS UI      更新时间:2023-09-26

请考虑这个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:无法设置未定义的属性"date"

请参阅下面的详细信息。

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

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

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

TypeError:无法设置未定义的属性"date"在初始(https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.min.js:9:3230)在链接(https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.min.js:9:4936)在http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:58:185在W(http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:49:141)在f(http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:42:268)在f(http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:42:285)在W(http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:49:82)在f(http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:42:268)在f(http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:42:285)在http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:41:459(匿名函数)@angular.js:9383(匿名函数)@角度.js:6825W@角度js:6215f@角度js:5622f@angular.js:5625W@angular.js:6206f@angular.js:5622f@angular.js:5625(匿名函数)@angular.js:5527(匿名函数)@angular.js:1301h.$eval@angular js:11906h.$apply@angular.js:12006(匿名函数)@angular.js:1299d@angular.js:3697Xb.c@angular.js:1297Xb@angular js:1311Rc@angular.js:1260(匿名函数)@angular.js:220534a@angular.js:2339(匿名函数)@angular js:2610q@angular.js:309Xc.c@angular js:2609

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

查看具有angular ui引导程序所需的依赖项

Demo Plunkr

正如我从你的帖子中得到的,你无法从日期选择器中选择日期,或者点击日历图标时日期选择器没有打开。

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

您应该使用兼容的版本。

通过以下链接进行plunker演示

Plunker演示