Angular 18+全局配置provideMomentDateAdapter日期格式不生效

我想让日期选择器显示YYYY-MM-DD格式，但它始终默认显示MM/DD/YYYY。在组件级别配置provideMomentDateAdapter(MY_FORMATS)时，日期能正确显示成YYYY-MM-DD，但全局配置时就不行。已经安装了@angular/material-moment-adapter，相关代码如下：

app.config.ts #

import { MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
import { provideMomentDateAdapter } from '@angular/material-moment-adapter';

// 格式含义参考Moment.js文档
export const MY_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

export const appConfig: ApplicationConfig = {
  providers: [
    // 其他providers
    importProvidersFrom(MatNativeDateModule),
    provideMomentDateAdapter(MY_FORMATS),
  ]
};

组件ts代码 #

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatMomentDateModule, provideMomentDateAdapter } from "@angular/material-moment-adapter";
import * as _moment from 'moment';
import { default as _rollupMoment } from 'moment';

const moment = _rollupMoment || _moment;

interface SharedLogForm {
  logType: FormControl<logTypeIntfc>;
  logDate: FormControl<_moment.Moment>;
  logMode: FormControl<boolean>;
};

@Component({
  selector: 'app-log-viewer',
  standalone: true,
  // providers: [
  //   provideMomentDateAdapter(MY_FORMATS),
  // ],
  imports: [ 
    MatFormFieldModule, FormsModule, ReactiveFormsModule,
    MatIconModule, MatCheckboxModule, MatSelectModule,
    MatInputModule, MatButtonModule, MatTooltipModule,
    CommonModule, MatDatepickerModule, MatNativeDateModule,
    MatDatepickerModule, MatMomentDateModule 
  ],
  templateUrl: './log-viewer.component.html',
  styleUrl: './log-viewer.component.scss'
})
export class LogViewerComponent {
 
  logForm: FormGroup<SharedLogForm>;
  
  constructor() {
    this.logForm = new FormGroup<SharedLogForm>({
      logType: new FormControl(this.logTypeArray[0], {nonNullable: true}),
      logDate: new FormControl(moment(), {nonNullable: true}),
      logMode: new FormControl(false, {nonNullable: true}),
    });
  }
}

组件HTML代码 #

<mat-form-field
  appearance="outline"
  color="primary"
  floatLabel="always">
  <mat-label>Choose Log date (UTC)</mat-label>
  <input matInput
    [matDatepicker]="picker"
    formControlName="logDate"
    matTooltip="Choose any date to see the logs.
    By default, today's logs will be displayed.">
  <mat-hint>YYYY-MM-DD</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

解决方案 #

问题根源是你同时引入了MatNativeDateModule和MatMomentDateModule，且全局配置中添加了importProvidersFrom(MatNativeDateModule)，这会让NativeDateAdapter覆盖全局配置的MomentDateAdapter，导致全局格式不生效。

修改步骤：

1. 修改app.config.ts：移除MatNativeDateModule相关导入和importProvidersFrom(MatNativeDateModule)，因为使用Moment适配器不需要Native日期模块
2. 修改组件ts：在imports数组中移除MatNativeDateModule，只保留MatMomentDateModule
3. 确保全局的MY_FORMATS正确传递给provideMomentDateAdapter

修改后的app.config.ts：

import { provideMomentDateAdapter } from '@angular/material-moment-adapter';

export const MY_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

export const appConfig: ApplicationConfig = {
  providers: [
    // 其他providers
    provideMomentDateAdapter(MY_FORMATS),
  ]
};

修改后的组件imports部分：

imports: [ 
  MatFormFieldModule, FormsModule, ReactiveFormsModule,
  MatIconModule, MatCheckboxModule, MatSelectModule,
  MatInputModule, MatButtonModule, MatTooltipModule,
  CommonModule, MatDatepickerModule, MatMomentDateModule 
],

原理：Angular Material的日期适配器通过依赖注入优先级生效，NativeDateAdapter的全局提供者会覆盖MomentDateAdapter的配置，移除Native相关模块后，全局的Moment适配器配置就能正常生效。

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