Angular Material中两个日期选择器设置不同日期格式的方案问询

嗨，这个场景我之前在项目里也遇到过！确实全局修改DateAdapter会影响所有日期选择器，不过Angular Material提供了局部配置的方案，完全可以给不同的日期选择器设置独立的格式，给你两个实用的解决思路：

方案1：给单个日期选择器局部注入格式配置 #

你可以通过给目标日期选择器的容器元素添加[providers]属性，局部注入专属的DateAdapter和MAT_DATE_FORMATS，这样只会作用于该容器内的日期选择器，不会影响全局。

步骤示例： #

1. 先在组件里定义两种不同的日期格式：

import { Component } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';

// 格式1：DD/MM/YYYY
export const DATE_FORMAT_DDMMYYYY = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

// 格式2：YYYY-MM-DD
export const DATE_FORMAT_YYYYMMDD = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY MMM',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@Component({
  selector: 'app-multi-date-pickers',
  templateUrl: './multi-date-pickers.component.html',
})
export class MultiDatePickersComponent {
  date1: Date | null = null;
  date2: Date | null = null;
}

2. 在模板中给每个日期选择器的容器绑定局部providers：

<!-- 第一个日期选择器：DD/MM/YYYY格式 -->
<div [providers]="[
  { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
  { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT_DDMMYYYY }
]">
  <mat-form-field appearance="fill">
    <mat-label>日期格式1 (DD/MM/YYYY)</mat-label>
    <input matInput [matDatepicker]="picker1" [(ngModel)]="date1">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker #picker1></mat-datepicker>
  </mat-form-field>
</div>

<!-- 第二个日期选择器：YYYY-MM-DD格式 -->
<div [providers]="[
  { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
  { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT_YYYYMMDD }
]">
  <mat-form-field appearance="fill">
    <mat-label>日期格式2 (YYYY-MM-DD)</mat-label>
    <input matInput [matDatepicker]="picker2" [(ngModel)]="date2">
    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
  </mat-form-field>
</div>

方案2：封装独立的日期选择器组件（适合重复使用场景） #

如果项目中需要多次使用不同格式的日期选择器，推荐把每种格式的日期选择器封装成独立组件，在组件内部配置专属的格式和适配器，使用时直接调用组件即可，代码更整洁易维护。

示例（以DD/MM/YYYY格式组件为例）： #

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';

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

@Component({
  selector: 'app-date-picker-ddmmyyyy',
  templateUrl: './date-picker-ddmmyyyy.component.html',
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT_DDMMYYYY }
  ]
})
export class DatePickerDDMMYYYYComponent {
  @Input() date: Date | null = null;
  @Output() dateChange = new EventEmitter<Date | null>();
}

组件模板：

<mat-form-field appearance="fill">
  <mat-label>选择日期 (DD/MM/YYYY)</mat-label>
  <input matInput [matDatepicker]="picker" [(ngModel)]="date" (ngModelChange)="dateChange.emit(date)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

使用时直接调用：

<app-date-picker-ddmmyyyy [(date)]="myDate"></app-date-picker-ddmmyyyy>

小贴士 #

如果你没有使用Moment.js，而是用Angular原生的NativeDateAdapter，只需要把代码里的MomentDateAdapter替换成NativeDateAdapter就可以了，格式配置的逻辑完全一致。

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