使用 momentjs 更改 Angular Material 中 md-datepicker 的格式

IT技术 javascript angularjs localization angular-material momentjs
2021-03-01 16:07:00

Angular material 引入了一个新的日期选择器组件,可在此处找到

我希望此组件返回的日期采用yyy-mm-dd格式,但我不确定这是如何完成的。通过搜索我发现$mdDateLocaleProvider可以使用,但我找不到使用它的示例。

有人可以向我展示一个格式化返回日期的工作示例md-datepicker吗?

6个回答

$mdDateLocaleProviderAngular Material 文档中有一个文档

angular.module('app').config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
       return moment(date).format('YYYY-MM-DD');
    };
});

如果您不使用 moment.js,请将里面的代码替换formatDate为您希望用于格式化日期的任何内容。

是一个基于 Angular Material 文档示例的 CodePen 示例。

@saurabh,我已经修好了。我的用例只是将此日期值发送回服务器,但我们的 java 后端无法处理它。所以我的后端开发人员要求我在没有“.***Z”的情况下发回日期。幸运的是, moment(question.date).format('YYYY-MM-DDTHH:mm:ss') 对我有用。希望这可以帮助
2021-04-22 16:07:00
这将今天的日期设置为 datepicker。我希望它在加载时为空。我该怎么办?
2021-04-29 16:07:00
不幸的是,如果日期是从键盘输入的,则它不起作用。例如。对于上述格式,我输入 2016-04-01 返回 1 月 4 日:/
2021-05-02 16:07:00
@AliDemirci 假设您绑定的日期正在undefined加载,这样的事情应该可以工作:return date ? moment(date).format('YYYY-MM-DD') : '';
2021-05-10 16:07:00
谢谢你的输入,但它没有返回我在 ng-model 上格式化的日期,而是给了我一个日期 Tue Oct 06 2015 00:00:00 GMT+0300
2021-05-13 16:07:00

还要解决 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);
};

问候

虽然此代码被调用,但它似乎并没有真正更新值。
2021-04-21 16:07:00
这应该是公认的答案。如果您正在使用 moment,您还需要将其添加到 $mdDateLocaleProvider 之后的配置参数中,如下所示: angular.module('app') .config(function ($mdDateLocaleProvider, moment) { ... })
2021-04-25 16:07:00

对于那些不使用 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);
};
我在没有 moment.js 的情况下完成了这项工作。在使用它的组件中(而不是在配置阶段),我这样做:$mdDateLocale.formatDate = date => $filter('date')(date, "mediumDate");另一个方向由 javascript 的内置日期解析自动处理,这是非常宽容的。
2021-05-05 16:07:00
这需要额外的东西吗?我尝试了它(尽管没有片刻),并且确实调用了代码,但结果并没有出现在模型中。
2021-05-14 16:07:00

-- 当我们在 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();
});
不,先生,我没有收到任何错误。只需在您的 index.html 页面中添加 moment.js 引用,例如 - <script src="Scripts/moment.min.js"></script> 并且它对我有用。
2021-04-26 16:07:00
您如何访问控制器内的时刻?您没有收到任何错误吗?
2021-05-02 16:07:00
如果您只想覆盖 1 个控制器中的格式,而不是其他控制器,那么这是一个很棒的解决方案。谢谢 - 辛苦了!
2021-05-08 16:07:00