Angular material 引入了一个新的日期选择器组件,可在此处找到。
我希望此组件返回的日期采用yyy-mm-dd格式,但我不确定这是如何完成的。通过搜索我发现$mdDateLocaleProvider
可以使用,但我找不到使用它的示例。
有人可以向我展示一个格式化返回日期的工作示例md-datepicker
吗?
Angular material 引入了一个新的日期选择器组件,可在此处找到。
我希望此组件返回的日期采用yyy-mm-dd格式,但我不确定这是如何完成的。通过搜索我发现$mdDateLocaleProvider
可以使用,但我找不到使用它的示例。
有人可以向我展示一个格式化返回日期的工作示例md-datepicker
吗?
$mdDateLocaleProvider
Angular Material 文档中有一个文档。
angular.module('app').config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('YYYY-MM-DD');
};
});
如果您不使用 moment.js,请将里面的代码替换formatDate
为您希望用于格式化日期的任何内容。
这是一个基于 Angular Material 文档示例的 CodePen 示例。
还要解决 kazuar 指出的问题:
不幸的是,如果日期是从键盘输入的,则它不起作用
您还应该定义 parseDate 方法。从文档:
$mdDateLocaleProvider.parseDate = function(dateString) {
var m = moment(dateString, 'L', true);
return m.isValid() ? m.toDate() : new Date(NaN);
};
对于一个完整的例子,我在我的应用程序中有(使用 moment):
$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-datapicker 指令中按摩“无效日期”时,效果很好:
$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 服务不会按照我们的需要格式化日期。我们必须在 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();
});