Angular DatePicker 拒绝以 DD/MM/YYYY 格式显示

Question

我的应用程序设置

import {
  MAT_MOMENT_DATE_ADAPTER_OPTIONS,
  MAT_MOMENT_DATE_FORMATS,
  MomentDateAdapter
} from '@angular/material-moment-adapter';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from "@angular/material/core";
import moment from 'moment/min/moment-with-locales';
moment.locale('en-gb')

export const MY_FORMATS = {
  parse: {
    dateInput: ['DD/MM/YYYY'],
  },
  display: {
    dateInput: (date: any) => moment(date).format('DD/MM/YYYY'),
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  },
};

enableProdMode();
bootstrapApplication(
  AppComponent,
  {
    providers: [
    provideRouter(APP_ROUTES),
    provideHttpClient(withFetch()),
    provideAnimationsAsync(),
    provideAnimations(),
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline' }},
    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
    { provide: DateAdapter, useClass: MomentDateAdapter },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
],
  }
).catch((err) =>
  console.error(err),
);

我的组件 HTML

<mat-form-field class="form-date">
  <mat-label>Contract Start Date</mat-label>
  <input matInput [matDatepicker]="picker" formControlName="contractStart">
  <mat-hint>DD/MM/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker [startAt]="contractStart.value"></mat-datepicker>
</mat-form-field>

contractStart.value 是“YYYY-MM-DD”形式的 iso 日期

日期选择器仍然以 DD/MM/YYYY 的形式显示日期？

有什么想法可能会发生这种情况吗？我已遵循此处的所有说明：https://material.angular.io/components/datepicker/overview

ST

Answer 1

export const MY_FORMATS = {
  parse: {
    dateInput: ['DD/MM/YYYY'],
  },
  display: {
    dateInput: (date: any) => moment(date).format('DD/MM/YYYY'),
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  },
};

parse 中的 dateInput 指示如何从输入中解析日期。

显示中的 dateInput 指示日期将如何显示在输入上。

如果您想要YYYY-MM-DD格式，请尝试此配置

export const MY_FORMATS = {
  parse: {
    dateInput: ['YYYY-MM-DD'],
  },
  display: {
    dateInput: (date: any) => moment(date).format('YYYY-MM-DD'),
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  },
};