设置 AngularJS UI Bootstrap 日期选择器时无法设置未定义的 属性 'date'
Cannot set property 'date' of undefined when setting up AngularJS UI Bootstrap Datepicker
请考虑这个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
基本上您需要更新 angular 版本才能使用最新的 1.3.x
Look at Dependency required to have angular-ui-bootstrap.
正如我从您的 post 那里得知的那样,您无法 select 从日期选择器中获取日期,或者点击日历图标时日期选择器未打开。
这是因为您使用的 angular-bootsrap-ui 版本与您在代码中使用的 angular js 版本不兼容。
您应该使用兼容的版本。
通过下面的 link 进行 plunker 演示
请考虑这个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
基本上您需要更新 angular 版本才能使用最新的 1.3.x
Look at Dependency required to have angular-ui-bootstrap.
正如我从您的 post 那里得知的那样,您无法 select 从日期选择器中获取日期,或者点击日历图标时日期选择器未打开。
这是因为您使用的 angular-bootsrap-ui 版本与您在代码中使用的 angular js 版本不兼容。
您应该使用兼容的版本。
通过下面的 link 进行 plunker 演示