使用 date-fns 和 Angular Material 日期选择器配置区域设置时，日期会消失

Question

我正在尝试在我的 Anuglar 18 应用程序中使用 Angular Material 日期选择器配置 date-fns。但是，当我尝试配置区域设置时，日期选择器中的所有日期都不会出现。如果我删除已配置的区域设置，日期会重新出现，但我没有获得正确的格式。

当我打开日期选择器时，出现此错误：

ERROR RangeError: Incorrect locale information provided
    at new Locale (<anonymous>)
    at _NativeDateAdapter.getFirstDayOfWeek (core.mjs:572:22)
    at _MatMonthView._init (datepicker.mjs:1480:111)
    at Object.next (datepicker.mjs:1331:109)
    at ConsumerObserver2.next (Subscriber.js:90:25)
    at Subscriber2._next (Subscriber.js:59:22)
    at Subscriber2.next (Subscriber.js:32:12)

这是我当前的配置：

import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
import { nb } from 'date-fns/locale/nb';


export const DATE_FNS_FORMATS = {
  parse: {
    dateInput: 'dd.MM.yyyy',
  },
  display: {
    dateInput: 'dd.MM.yyyy',
    monthYearLabel: 'MMM yyyy',
    dateA11yLabel: 'dd.MM.yyyy',
    monthYearA11yLabel: 'MMMM yyyy',
  },
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    { provide: MAT_DATE_LOCALE, useValue: nb },
    { provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: DATE_FNS_FORMATS },
}

Answer 1

您缺少定义用于日期选择器的

provideDateFnsAdapter

。好像要用

provideNativeDateAdapter

。

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideDateFnsAdapter(), // <--------- include this!
    { provide: MAT_DATE_LOCALE, useValue: nb },
    { provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: DATE_FNS_FORMATS },
}

相关解答-详细解释