Angular材料引入了一个新的日期选择器组件here。
我希望此组件返回的日期格式为yyy-mm-dd，但我不确定这是如何完成的。通过搜索我发现可以使用$mdDateLocaleProvider，但我找不到使用它的例子。
有人能告诉我一个格式化md-datepicker返回日期的工作示例吗？
Angular Material文档中有$mdDateLocaleProvider的文档。
angular.module('app').config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('YYYY-MM-DD');
};
});
如果您不使用moment.js，请将formatDate中的代码替换为您希望用于格式化日期的任何内容。
Here是一个基于Angular Material docs样本的CodePen示例。
对于angular-material> = 5.x.x
在角材料文档中描述了使用其他自定义/预定义日期格式的推荐方法：
使用MomentJS定制和解析日期时间显示formats的实现示例：
...
import { MomentModule } from 'angular2-moment';
import { MatMomentDateModule, MomentDateAdapter, MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
...
// moment formats explanation: https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
parse: {
dateInput: 'YYYY-MM-DD',
},
display: {
dateInput: 'YYYY-MM-DD',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'YYYY-MM-DD',
monthYearA11yLabel: 'MMMM YYYY',
},
};
...
@Component({
...
providers: [
// `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
// `MatMomentDateModule` in your applications root module. We provide it at the component level
// here, due to limitations of our example generation script.
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
// {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}
]
})
...
根据您的实现，您可能还需要使用组件内部：
date = new FormControl(moment());
您还必须为Angular安装Moment库和适配器：
https://www.npmjs.com/package/angular2-moment
npm install --save angular2-moment
https://www.npmjs.com/package/@angular/material-moment-adapter
npm install --save @ angular / material-moment-adapter
如果您使用的是angular-material.js的最新版本，请使用$ mdDateLocale服务。此代码示例使用angular的内置日期过滤器作为使用moment.js库的替代方法。请在此链接https://docs.angularjs.org/api/ng/filter/date中使用angular的$ filter服务查看其他日期格式选项。
// 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");
};
});
我使用qazxsw poi在前端格式化它。如果您想在将日期发送到后端时格式化日期，以下内容对我有用： -
$mdDateLocaleProvider我在控制器中有上述内容。
在我的情况下，我失去了PlaceHolder一切正常，但当我使用自定义格式时，placeHolder正在消失。下面的行解决了我的占位符问题。
$filter('date')(this.date, 'MM/dd/yyyy');
还要解决kazuar指出的问题：
不幸的是，如果从键盘输入日期，它就不起作用
你也应该定义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的人，可以格式化为字符串：
.config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
var day = date.getDate();
var monthIndex = date.getMonth();
var year = date.getFullYear();
return day + '/' + (monthIndex + 1) + '/' + year;
};
});
当从键盘输入日期并在启动时返回null以避免md-datepicker指令中的按钮“无效日期”时，工作完美：
$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);
};
使用AngularJS 1.5.9和时刻2.17.1，可以在运行时更改日期格式，月份名称和周名称。
首先配置初始语言。 （在此示例中，angular-translate / $ translateProvider的配置是可选的。）
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') : '';
};
}
稍后您可能有一些基本控制器监视语言变量，当用户选择另一种语言时，该变量会被更改。
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方法，因为它们已经配置为使用通过调用moment.locale(newValue)更改的'L'格式。
有关更多区域设置自定义的信息，请参阅$ mdDateLocaleProvider的文档：https://material.angularjs.org/latest/api/service/ $ mdDateLocaleProvider
额外：这是语言选择器的外观：
<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>
- 当我们在md-dialog中使用md-DatePicker时，$ mdDateLocaleProvider服务不会根据需要格式化日期。我们必须在md-dialog的控制器中使用$ mdDateLocale来格式化md-DatePicker的日期。例如 -
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();
});
使用$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 into.config，因为它不是提供者，所以我不得不在.run内用$mdDateLocale进行。
我有同样的问题，并在moment.js的帮助下想出了这个简单的解决方案。我使用了ng-change属性，当日期改变时会触发该属性。
在你的HTML内：
<md-datepicker ng-model="myDate" ng-change="dateChanged()"></md-datepicker>
在您的控制器内：
$scope.dateChanged = function() {
this.myDate = moment(this.myDate).format('YYYY/MM/DD');
}
我想提供我的解决方案，这是100％基于Christiaan Westerbeek's post。我真的很喜欢他的所作所为，但我个人想要一些更简单的东西。
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;
};
应该注意的是，此解决方案不会重新格式化您的md-datepicker的显示值。它仅在模型更改值时才起作用。