在Angular Material中更改md-datepicker的格式
angular度材料引入了一个新的dateselect器组件。
我希望这个组件返回的date格式是yyy-mm-dd，但我不确定这是如何完成的。 通过search，我发现$mdDateLocaleProvider可以使用，但我找不到使用它的例子。
有人可以告诉我一个格式化datemd-datepicker返回的date的工作示例？
在Angular Material文档中有$mdDateLocaleProvider文档。
angular.module('app').config(function($mdDateLocaleProvider) { $mdDateLocaleProvider.formatDate = function(date) { return moment(date).format('YYYY-MM-DD'); }; });
如果您不使用moment.js，请将formatDate的代码replace为您希望用来格式化date的任何内容。
以下是基于Angular Material文档样本的CodePen示例。
还要解决kazuar指出的问题：
不幸的是，如果date是从键盘input的，则不起作用
你也应该定义parseDate方法。 从文档：
$mdDateLocaleProvider.parseDate = function(dateString) { var m = moment(dateString, 'L', true); return m.isValid() ? m.toDate() : new Date(NaN); };
作为一个完整的例子，我已经在我的应用程序（使用时刻）：
$mdDateLocaleProvider.formatDate = function(date) { return moment(date).format('DD/MM/YYYY'); }; $mdDateLocaleProvider.parseDate = function(dateString) { var m = moment(dateString, 'DD/MM/YYYY', true); return m.isValid() ? m.toDate() : new Date(NaN); };
问候
对于那些不使用Moment.js的人，你可以格式化为一个string：
.config(function($mdDateLocaleProvider) { $mdDateLocaleProvider.formatDate = function(date) { var day = date.getDate(); var monthIndex = date.getMonth(); var year = date.getFullYear(); return day + '/' + (monthIndex + 1) + '/' + year; }; });
当从keyborardinputdate并在启动时返回null以避免md-datapicker指令中的按摩“无效date”：
$mdDateLocaleProvider.formatDate = function(date) { return date ? moment(date).format('DD/MM/YYYY') : null; }; $mdDateLocaleProvider.parseDate = function(dateString) { var m = moment(dateString, 'DD/MM/YYYY', true); return m.isValid() ? m.toDate() : new Date(NaN); };
– 当我们在md-dialog中使用md-DatePicker时，$ mdDateLocaleProvider服务不会根据需要格式化date。 我们必须在md-dialog的控制器中使用$ mdDateLocale格式化md-DatePicker的date。 例如 –
angular.module('MyApp').controller('AppCtrl', function($scope, $mdDateLocale) { $mdDateLocale.formatDate = function(date) { return moment(date).format('YYYY-MM-DD'); }; $scope.myDate = new Date('2015-10-15'); $scope.minDate = new Date(); $scope.maxDate = new Date(); });
在AngularJS 1.5.9和2.17.1版本中，运行期间更改date格式，月份名称和星期名称是完全可能的。
首先configuration初始语言。 （在这个例子中，angular-translate / $ translateProvider的configuration是可选的。）
angular.module('app').config(configureLocalization) configureLocalization.$inject = ['$translateProvider', '$mdDateLocaleProvider', 'localdb', '__config']; function configureLocalization($translateProvider, $mdDateLocaleProvider, localdb, __config) { // Configure angular-translate $translateProvider.useStaticFilesLoader({ prefix: 'locale/', suffix: '.json' }); // get the language from local storage using a helper var language = localdb.get('language'); if (!language || language === 'undefined') { localdb.set('language', (language = __config.app.defaultLanguage)); } // Set the preferredLanguage in angular-translate $translateProvider.preferredLanguage(language); // Change moment's locale so the 'L'-format is adjusted. // For example the 'L'-format is DD.MM.YYYY for German moment.locale(language); // Set month and week names for the general $mdDateLocale service var localeData = moment.localeData(); $mdDateLocaleProvider.months = localeData._months; $mdDateLocaleProvider.shortMonths = moment.monthsShort(); $mdDateLocaleProvider.days = localeData._weekdays; $mdDateLocaleProvider.shortDays = localeData._weekdaysMin; // Optionaly let the week start on the day as defined by moment's locale data $mdDateLocaleProvider.firstDayOfWeek = localeData._week.dow; // Format and parse dates based on moment's 'L'-format // 'L'-format may later be changed $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') : ''; }; }
稍后，您可能会有一些基本控制器观察用户select另一种语言时更改的语言variables。
angular.module('app').controller('BaseCtrl', Base); Base.$inject = ['$scope', '$translate', 'localdb', '$mdDateLocale']; function Base($scope, $translate, localdb, $mdDateLocale) { var vm = this; vm.language = $translate.use(); $scope.$watch('BaseCtrl.language', function(newValue, oldValue) { // Set the new language in local storage localdb.set('language', newValue); $translate.use(newValue); // Change moment's locale so the 'L'-format is adjusted. // For example the 'L'-format is DD-MM-YYYY for Dutch moment.locale(newValue); // Set month and week names for the general $mdDateLocale service var localeDate = moment.localeData(); $mdDateLocale.months = localeDate._months; $mdDateLocale.shortMonths = moment.monthsShort(); $mdDateLocale.days = localeDate._weekdays; $mdDateLocale.shortDays = localeDate._weekdaysMin; // Optionaly let the week start on the day as defined by moment's locale data $mdDateLocale.firstDayOfWeek = localeData._week.dow; }); }
请注意，我们不需要更改$mdDateLocale.formatDate和$mdDateLocale.parseDate方法，因为它们已被configuration为使用通过调用moment.locale(newValue)更改的L'-format。
查看$ mdDateLocaleProvider的文档以获取更多的区域定制： https ://material.angularjs.org/latest/api/service/ $ mdDateLocaleProvider
奖金：这是语言select器可能的样子：
<md-select ng-model="BaseCtrl.language" class="md-no-underline"> <md-option ng-repeat="language in ['en', 'de', 'fr', 'nl']" ng-value ="language" ><span class ="flag-icon flag-icon-{{language ==='en' ? 'gb' : language}}" ></span> </md-option> </md-select>
我想提供一个基于Christiaan Westerbeek职位的100％解决scheme。 我真的很喜欢他所做的，但是我个人想要一些更简单的东西。
appConfig.js
// config params in global scope that need to be set outside of Angular (due to Angular limitiations) var appConfig = { // enables the dynamic setting of md-datepicker display masks (eg. when user changes language from English to Spanish) date: { // default mask format: "MM/dd/yyyy", // md-datepicker display format mdFormatDate: function (date) { if (date && date instanceof Date) { return date.format(appConfig.date.format); } else { return null; } } } };
app.material.config.js
// set angular material config app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) { // this is a global object set inside appConfig.js $mdDateLocaleProvider.formatDate = appConfig.date.mdFormatDate; }]);
一些处理本地化/翻译/ /等的服务文件
// inside the service where you'd track the language/locale change service._updateConfigDateFormat = function (theNewDateFormat) { // where theNewDateFormat is something like 'yyyy/MM/dd' or whatever daepConfig.date.format = theNewDateFormat; };
应该指出的是，这个解决scheme将不会重新格式化您的md-datepicker的显示值。 它只会在模型更改值时起作用。
使用$filter而不是moment.js并引用来自@Ian Poston Framer和@java dev的响应，以下内容对我来说是最后的工作：
angular .module('App', ['ngMaterial']) .run(function($mdDateLocale, $filter) { $mdDateLocale.formatDate = function(date) { return $filter('date')(date, "dd-MM-yyyy"); }; })
我无法将$filter注入到.config因为它不是提供程序，所以我必须在$mdDateLocale 。
如果您使用的是最新版本的angular-material.js，则使用$ mdDateLocale服务。 此代码示例使用angular的内置datefilter作为使用moment.js库的替代方法。 请参阅https://docs.angularjs.org/api/ng/filter/date处的使用angular度的$ filter服务的其他date格式选项。
// mainController.js angular.module('app').config(function($mdDateLocale, $filter, $scope) { // FORMAT THE DATE FOR THE DATEPICKER $mdDateLocale.formatDate = function(date) { return $filter('date')($scope.myDate, "mediumDate"); }; });
我使用$mdDateLocaleProvider在前端格式化它。 如果你想格式化date，而发送到后端，以下为我工作： –
$filter('date')(this.date, 'MM/dd/yyyy');
我有上面的控制器。
