我是新来的,在使用 Angular Material 0.11.0 最近可用的 md-datepicker 时遇到了一些问题: https://material.angularjs.org/0.11.0/#/demo/material.components.datepicker
简而言之,我的应用程序允许用户添加带有名称和描述的单个项目。他们还能够更新相关的项目详细信息。
添加和更新都是通过 Material Designs mdDialog 完成的。 一旦用户点击添加或更新, Controller 就会调用相关函数,该函数会调用我工厂中的相应函数。
工厂函数包含我配置的 $mdDialog 服务。 在添加 md-datepicker 之前,我能够毫无问题地更新和添加。
点击编辑时出现以下错误。
TypeError: date.toLocaleDateString is not a function
at Object.defaultFormatDate [as formatDate] (angular-material.js:6858)
at DatePickerCtrl.configureNgModel.ngModelCtrl.$render (angular-material.js:7182)
at Object.ngModelWatch (angular.js:25353)
at Scope.parent.$get.Scope.$digest (angular.js:15751)
at Scope.parent.$get.Scope.$apply (angular.js:16030)
at done (angular.js:10545)
at completeRequest (angular.js:10717)
at XMLHttpRequest.requestLoaded (angular.js:10658)
环顾四周后,我发现我应该配置 md-datepicker。 我以灵感形式https://material.angularjs.org/HEAD/#/api/material.components.datepicker/service/ $mdDateLocaleProvider 并将以下代码作为 .config 添加到我的主要 AngularJS 应用程序(我正在使用 momentjs 根据用户的语言环境为用户提供日期)。
app.config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('L');
};});
现在我可以在我的“添加”工厂中添加一个包含以下代码的项目。我什至可以添加我选择的日期,我可以在纪元时间将它保存到 firebase。
return $mdDialog.show({
clickOutsideToClose: true,
controller: function($mdDialog) {
var vm = this;
vm.project = project;
vm.add = function(project) {
var date = new Date();
project.deadline = date.getTime();
if(project.deadline == undefined) {
project.deadline = null;
};
FBprojects.$add(project);
console.log(project);
$mdDialog.hide();
};
},
controllerAs: 'PAmodal',
templateUrl: 'views/newproject.html',
targetEvent: e
})
当我专门点击 md-datepicker 的日历图标来更改日期(一旦更新 $mdDialog 打开)时,问题就出现了。
TypeError: date.getFullYear is not a function
at CalendarCtrl.getDateId (angular-material.js:6427)
at angular-material.js:6349
at processQueue (angular.js:14678)
at angular.js:14694
at Scope.parent.$get.Scope.$eval (angular.js:15922)
at Scope.parent.$get.Scope.$digest (angular.js:15733)
at Scope.parent.$get.Scope.$apply (angular.js:16030)
at HTMLButtonElement.<anonymous> (angular.js:23486)
at HTMLButtonElement.jQuery.event.dispatch (jquery.js:4435)
at HTMLButtonElement.jQuery.event.add.elemData.handle (jquery.js:4121)(anonymous function) @ angular.js:12450ident.$get @ angular.js:9237processQueue @ angular.js:14686(anonymous function) @ angular.js:14694parent.$get.Scope.$eval @ angular.js:15922parent.$get.Scope.$digest @ angular.js:15733parent.$get.Scope.$apply @ angular.js:16030(anonymous function) @ angular.js:23486jQuery.event.dispatch @ jquery.js:4435jQuery.event.add.elemData.handle @ jquery.js:4121
Uncaught TypeError: end.getFullYear is not a function
TypeError: date.getFullYear is not a function
at CalendarCtrl.getDateId (http://localhost:9000/bower_components/angular-material/angular-material.js:6427:12)
at CalendarCtrl.focus (http://localhost:9000/bower_components/angular-material/angular-material.js:6298:23)
at http://localhost:9000/bower_components/angular-material/angular-material.js:7372:30
at http://localhost:9000/bower_components/angular-material/angular-material.js:1068:11
at Array.forEach (native)
at processQueue (http://localhost:9000/bower_components/angular-material/angular-material.js:1067:15)
at http://localhost:9000/bower_components/angular/angular.js:17788:31
at completeOutstandingRequest (http://localhost:9000/bower_components/angular/angular.js:5498:10)
at http://localhost:9000/bower_components/angular/angular.js:5775:7
此时 md-datepicker 不知道它是哪一年,而是从 1933 年左右开始。奇怪的是,如果我不点击图标并先更改输入中的日期,我可以点击带来的图标在正确的日期出日历。只要我当前的 mdDialog 没有关闭,我就可以这样做。然后,当我单击更新时,它有时会更新 firebase 上的日期。我仍然不知道为什么它不一致。以下代码通过 Controller 调用以更新项目
.如果我保持 md-datepicker 不变,我可以很好地更改我的其他数据。
updateProject: function(e, currentProject) {
return $mdDialog.show({
clickOutsideToClose: true,
controller: function($mdDialog) {
var vm = this;
vm.project = {};
vm.project = currentProject;
var pid = $stateParams.pid;
var n = vm.project.deadline;
var d = new Date(n).toString();
vm.update = function() {
//Updates at FB locations with updated project
ref.child('projects').child(pid).update({
title: vm.project.title,
description: vm.project.description,
deadline: d
});
$mdDialog.hide();
};
},
controllerAs: 'PEmodal',
templateUrl: 'views/updateproject.html',
parent: angular.element(document.body),
targetEvent: e
});
我一直被困在这个问题上有一段时间没有解决方案,希望能对此有所了解。谢谢大家的宝贵时间。
最佳答案
在添加 $mdDateLocaleProvider 配置之前,我遇到了与您相同的问题。我不断收到 TypeError: date.toLocaleDateString is not a function。
我也在使用 firebase 并且能够毫无问题地推送。我什至可以查看带有保存结果的日期选择器,只有在 ref.update 上我才会收到错误。我花了相当多的时间来寻找这个错误,最后发现由于 Angular 的摘要周期,Angular Material 两次通过它的日期函数运行我的日期,第二次通过它使用 js Date 对象的字符串表示而不是日期对象本身。 (因此 TypeError: date.toLocaleDateString 不是函数 - 因为它将日期视为字符串而不是日期对象。)
不幸的是,我无法在我的实际应用程序中提出修复,所以我不得不进入 angular-material.js 源代码,就在错误发生之前,我获取了传入的日期并确保它被转换为日期 (d = new Date(d));
这对我有用,因为它总是一个日期或日期的 toString - 无论哪种方式,它都确保它是一个实际的日期对象。
关于javascript - 单击时 Angular Material md-datepicker 抛出错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32777813/