Angular Material2中Moment.js日期选择器格式化问题咨询

嘿，这个场景我刚好处理过，给你说个省心的方案：完全不需要继承MomentDateAdapter重写format和parse方法，官方已经给我们留好了配置入口，直接改MAT_MOMENT_DATE_FORMATS就行！

具体步骤如下： #

1. 先确认依赖到位
   确保你已经安装了@angular/material-moment-adapter和moment这两个包，如果还没装，先跑命令：

   npm install @angular/material-moment-adapter moment
   

2. 自定义你的日期格式配置
   创建一个自定义的格式对象，覆盖默认的dateInput格式（这就是输入框最终显示的格式）。比如你要的年-月-日 时:分:秒，就这么写：

   import { MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';
   import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
   import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
   
   // 自定义日期格式，继承默认配置只改需要的部分
   const MY_CUSTOM_DATE_FORMATS = {
     ...MAT_MOMENT_DATE_FORMATS,
     display: {
       ...MAT_MOMENT_DATE_FORMATS.display,
       dateInput: 'YYYY-MM-DD HH:mm:ss', // 核心：设置输入框显示的格式
     },
     // 如果需要支持多种输入解析格式（比如用户输入不带时分秒的日期也能识别），可以加parse配置
     parse: {
       ...MAT_MOMENT_DATE_FORMATS.parse,
       dateInput: ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD'], // 支持两种输入格式
     }
   };
   

3. 在模块中注入配置
   在你的Angular模块（比如AppModule）的providers数组里，替换默认的DateAdapter和日期格式：

   @NgModule({
     // ...其他模块配置
     providers: [
       {
         provide: DateAdapter,
         useClass: MomentDateAdapter,
         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
       },
       { provide: MAT_DATE_FORMATS, useValue: MY_CUSTOM_DATE_FORMATS },
     ],
   })
   export class AppModule { }
   

为什么不用重写方法？ #

MomentDateAdapter本身就是基于moment.js实现的，它会自动使用moment的format()和parse()方法来处理日期。你只要在MAT_DATE_FORMATS里配置好对应的moment格式字符串，它就会帮你完成所有格式化和解析工作，完全覆盖你要显示年月日时分秒的需求。

只有当你有极其特殊的自定义逻辑（比如非标准日期格式的解析）时，才需要考虑继承MomentDateAdapter重写方法，常规场景用配置就足够啦！

内容的提问来源于stack exchange，提问作者jeti