更改 md-datepicker ng-model 格式

本文介绍了更改 md-datepicker ng-model 格式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Angular Material md-datepicker.ng-model 的值看起来像这样:"2017-04-04T22:12:51.000Z"(它被称为 ISO 格式什么的..)

好吧，问题是:如何创建全局配置，以便所有 md-datepicker 标签始终以某种格式格式化和解析 ng-model 值，例如 YYYY-MM-DD?

angular.module('MyApp').controller('AppCtrl', function($scope) {$scope.myDate = 新日期();$scope.minDate = 新日期($scope.myDate.getFullYear(),$scope.myDate.getMonth() - 2,$scope.myDate.getDate());$scope.maxDate = 新日期($scope.myDate.getFullYear(),$scope.myDate.getMonth() + 2,$scope.myDate.getDate());}).config(function($mdDateLocaleProvider) {$mdDateLocaleProvider.parseDate = 函数(日期字符串){var m = moment(dateString, 'L', true);返回 m.isValid() ?m.toDate() : 新日期(NaN);};$mdDateLocaleProvider.formatDate = 函数(日期){var m = 时刻(日期)；返回 m.isValid() ?m.format('L') : '';};});

<link href="https://material.angularjs.org/HEAD/docs.css" rel="stylesheet"/><link href="https://material.angularjs.org/HEAD/angular-material.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script><script src="https://material.angularjs.org/HEAD/angular-material.js"></script><script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script><div ng-app="MyApp" ng-controller="AppCtrl"><md-内容><md-datepicker ng-model="myDate" md-placeholder="输入日期"></md-datepicker></md-content><big>ng-model 值是:<strong>{{myDate}}</strong></big>

<p>我想这样格式化:YYYY-MM-DD

angular.module('MyApp').controller('AppCtrl', function($scope) {$scope.person = {姓名:约翰"，出生日期:1990-01-01 00:00:00"};}).directive('mdDatepicker', function () {功能链接(范围，元素，属性，ngModel){var 解析器 = 函数 (val) {val = moment(val).format('YYYY-MM-DD hh:mm:ss');返回值；};var 格式化程序 = 函数 (val) {如果 (!val) 返回 val;val = 时刻(val).toDate();返回值；};ngModel.$parsers.push(parser);ngModel.$formatters.push(formatter);}返回 {要求:'ngModel'，链接:链接，限制:'EA'，优先级:1}});

angular.module('MyApp') .controller('AppCtrl', function($scope) { $scope.myDate = new Date(); $scope.minDate = new Date( $scope.myDate.getFullYear(), $scope.myDate.getMonth() - 2, $scope.myDate.getDate()); $scope.maxDate = new Date( $scope.myDate.getFullYear(), $scope.myDate.getMonth() + 2, $scope.myDate.getDate()); }) .config(function($mdDateLocaleProvider) { $mdDateLocaleProvider.parseDate = function(dateString) { var m = moment(dateString, 'L', true); return m.isValid() ? m.toDate() : new Date(NaN); }; $mdDateLocaleProvider.formatDate = function(date) { var m = moment(date); return m.isValid() ? m.format('L') : ''; }; });

angular.module('MyApp') .controller('AppCtrl', function($scope) { $scope.person = { name: "John", birthDate: "1990-01-01 00:00:00" }; }) .directive('mdDatepicker', function () { function link(scope, element, attrs, ngModel) { var parser = function (val) { val = moment(val).format('YYYY-MM-DD hh:mm:ss'); return val; }; var formatter = function (val) { if (!val) return val; val = moment(val).toDate(); return val; }; ngModel.$parsers.push(parser); ngModel.$formatters.push(formatter); } return { require: 'ngModel', link: link, restrict: 'EA', priority: 1 } });