單擊時，Angular Material md-datepicker 會引發錯誤

Question

我是新來的，最近使用 Angular Material 0.11.0 的 md-datepicker 遇到了一些問題： https ://material.angularjs.org/0.11.0/#/demo/material.components.datepicker

簡而言之，我的應用程序允許用戶添加帶有名稱和描述的單個項目。 他們還能夠更新相關的項目詳細信息。

添加和更新都是通過 Material Designs mdDialog 完成的。 一旦用戶點擊添加或更新，控制器調用相關函數，該函數調用我工廠中的相應函數。

工廠函數包含我配置的 $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 上的日期。 我仍然不明白為什么它不一致。 以下代碼通過控制器調用以更新項目

---

. 如果我保持 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
        });

我一直被困在這個問題上一段時間沒有解決方案，並希望對此有所了解。 謝謝大家的時間。

---

Answer 1

在添加 $mdDateLocaleProvider 的配置之前，我遇到了與您相同的問題。 我不斷收到 TypeError: date.toLocaleDateString is not a function。

我也在使用 firebase 並且能夠毫無問題地推送。 我什至可以用保存的結果查看日期選擇器，只有在 ref.update 上我才會收到錯誤。 我花了很多時間來尋找錯誤，最后發現由於 angular 的摘要循環，angular 材料通過它的 date 函數兩次運行我的日期，第二次通過它使用的是 js Date 對象的字符串表示，而不是日期 obj 本身。 （因此 TypeError: date.toLocaleDateString 不是函數 - 因為它將日期視為字符串而不是日期對象。）

不幸的是，我無法在我的實際應用程序中找到修復程序，所以我不得不進入 angular-material.js 源代碼，就在錯誤發生之前，我獲取了傳入的日期並確保它被轉換為日期（d = 新日期（d））；

這對我有用，因為它始終是日期或日期的 toString - 無論哪種方式，它都確保它是一個實際的日期對象。

Answer 2

以下代碼在問題中保持原樣。

app.config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
   return moment(date).format('L');
};});

這消除了“TypeError: date.toLocaleDateString is not a function”錯誤。

在整個過程中，我只對時代感興趣。 我沒有意識到 md-datepicker 只喜歡日期對象。 這解釋了為什么我無法更新 project.deadline 因為它正在閱讀紀元時間。 它能夠很好地看到它，但是更改它會導致錯誤，因為它無法確定要顯示的日期（因此顯示 1934 ..）。

相反，我只專注於處理日期選擇器和日期對象。

添加新項目：

• var date 是來自 md-datepicker 的 date Object 形式的輸入。 然后我將其轉換為紀元，以便像其他值一樣將其保存到 firebase。

   var date = new Date(project.deadline); project.deadline = date.getTime();

更新項目：

• 將 currentProject 分配給 vm.project。 這使我可以訪問 vm.project.deadline，其中包括我在紀元時間添加的截止日期。 將截止日期從紀元時間轉換為日期對象。 這使我可以根據需要更改日期。 一旦用戶點擊更新，新的日期對象首先被轉換為紀元，然后我可以像其他數據一樣添加到 firebase。

   var vm = this; vm.project = {}; vm.project = currentProject; vm.project.deadline = new Date(vm.project.deadline); vm.update = function() { var date = new Date(vm.project.deadline); vm.project.deadline = date.getTime(); ...

我需要時代，因此需要轉換。 如果不需要紀元（或其他日期形式），我想保持日期對象不變應該沒有問題。

Answer 3

我有一個類似的錯誤，原因竟然是我被定義$mdDateLocale.formatDate輸出（日期- >字符串），但我卻沒有定義$mdDateLocale.parseDate輸入（與字符串>日期）。 一旦我這樣做了，錯誤就消失了。

請注意，這兩個函數都必須處理在 Angular 的摘要周期中可能是 undefined/string/Date 的輸入。 所以一定要在你 .split 或 .parse 或其他任何東西之前測試輸入。