I am new here and am experiencing some issues with the recently available md-datepicker on Angular Material 0.11.0:
https://material.angularjs.org/0.11.0/#/demo/material.components.datepicker
In short, my application allows users to add individual projects with a name and description. They can also update relevant project details.
Both additions and updates are done through Material Designs mdDialog. When the user clicks on add or update, the controller calls the corresponding function, which calls the corresponding function in my factory.
The factory functions contain the $ mdDialog service that I configured. I was able to update and add without problems until I add md-datepicker.
I got the following error when I clicked to change.
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)
Looking around, I realized that I had to configure md-datepicker. I took inspiration https://material.angularjs.org/HEAD/#/api/material.components.datepicker/service/ $ mdDateLocaleProvider and added the following code as .config to my main AngularJS application (I use momentjs to give users a date based on their locale).
app.config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('L');
};});
Now I can add the project with the following code to my 'add' factory. I can even add a date of my choice, and I can save it in firebase in the era.
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
})
The problem occurs when I specifically click on the md-datepicker calendar icon to change the date (after the $ mdDialog update is opened).
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 . , update, firebase. , .
. 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() {
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
});
- , . .