Angular Material Date Picker 未使用指定的自定义日期格式

Question

我似乎无法让 Material Datepicker 接受我提供的格式。我想将日期格式化为 YYYY-MM-DD，但它坚持使用 M/D/YYYY。

下面是我正在重现该问题的堆栈闪电战。此外，它会将之前选择的日期放在 HTML 页面的底部，看起来是不请自来的。

Stackblitz 的图片如下：

我正在自定义它，如许多不同的教程和文档所示：

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

我将它包含在我的 module.ts 文件中：

providers: [
    {provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS}
  ]

我也尝试用 NativeDateModule 替换 MatNativeDateModule：

imports:      [ 
BrowserModule, 
FormsModule,
MatDatepickerModule,  
NativeDateModule,    
BrowserAnimationsModule],

下面是我的 Stackblitz URL 重现该问题： https://stackblitz.com/edit/angular-ivy-bfjsid?file=src/app/app.module.ts

在这个例子中，如果我选择一个日期，它会将它放在输入框中的 M/D/YYYY 中。此外，它将先前的值放在页面底部，即使我没有任何引用它。

我还试图通过故意弄乱它来确保使用日期格式类，并且材料如我所愿地抱怨。

有人可以看看吗？

提前谢谢你。

Answer 1

问题 1：无法将日期格式化为 YYYY-MM-DD

解决方案：

您需要Angular Material Moment Adapter 来格式化日期选择器中的日期。

第 1 步：

npm install @angular/material-moment-adapter

第 2 步：

1. 在导入中添加 NativeDateModule
2. 在提供程序中添加 MomentDateAdapter

app.module.ts

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

@NgModule({
  imports: [
    ...
    MatDatepickerModule,
    NativeDateModule,
  ],
  declarations: [...],
  bootstrap: [...],
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
  ]
})
export class AppModule {}

---

问题 2：先前选择的值显示在页面底部

解决方案：

如果不需要，您可以在全局 css 中添加此 CSS 样式规则以隐藏 .cdk-visually-hidden 元素。

.cdk-visually-hidden {
  display: none;
}

Sample project in StackBlitz

Answer 2

您需要在提供程序中添加日期适配器才能使格式正常工作。 安装依赖@angular/material-moment-adapter

import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
{
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
}

STackblitz 链接：https://stackblitz.com/edit/angular-ivy-w1pdob?file=src%2Fapp%2Fhello.component.ts

Answer 3

您的代码中唯一缺少的是将 MomentDateAdapter 作为模块中的提供程序注入。

    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

datepicker 期望的值类型取决于提供的 DateAdapter 的类型。在“设置选定日期”部分下的https://material.angular.io/components/datepicker/overview 阅读更多相关信息，您可以根据此https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings 决定日期实施和日期格式设置。

文档有。 :)