mat-datepicker 上的多种 dateInput 格式

Posted 2023-02-18

【中文标题】mat-datepicker 上的多种 dateInput 格式

【英文标题】：Multiple dateInput formats on mat-datepicker

【发布时间】：2019-10-04 04:58:34

【问题描述】：

我正在创建两个 mat-datepicker，一个格式为“MM/YYYY”，另一个格式为“DD/MM/YYYY”，但我无法在模块中配置这两种格式。

我尝试将 MM/YYYY 的设置放入一个模块，并将 DD/MM/YYYY 的设置放入应用模块。

代码 1：

export const MY_FORMATS = 
  parse: 
    dateInput: 'MM/YYYY',
  ,
  display: 
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  ,
...

providers: [ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] ,
  provide: MAT_DATE_FORMATS, useValue: MY_FORMATS]
; 

代码 2：

export const MY_FORMATS = 
  parse: 
    dateInput: 'DD/MM/YYYY',
  ,
  display: 
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'DD MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'DD MMMM YYYY',
  ,
;
...
providers: [ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] ,
provide: MAT_DATE_FORMATS, useValue: MY_FORMATS]
)

如果我在设置中使用 DD/MM/YYYY 格式，所有日期显示为 DD/MM/YYYY，如果我不使用，所有日期显示为 MM/YYYY。我应该怎么做才能将一个日期显示为 MM/YYYY 而另一个日期显示为 DD/MM/YYYY？

【参考方案1】：

你读过这个吗？ https://medium.com/@kristinahertmann/multi-language-date-formats-with-angular-material-b8598415d117

可以在此处找到此示例的工作 stackblitz。

【讨论】：

感谢您的回答，我阅读了文章和代码，真的很有趣，但我不知道如何更改每个模块上的显示日期输入标签，这是我真正的问题。 format(date: Date, display: string | DateDisplay): string console.log(display); if (display === 'customInput') return new DatePipe(this.locale).transform(date, 'MM/yyyy'); else return new DatePipe(this.locale).transform(date, 'dd/MM/yyyy'); 我可以解析 Date ，但我仍然不知道如何将一个组件设置为 'customInput' 而另一个设置为 'elseInput'。

【参考方案2】：

我找到了一种方法来解决这个问题，就像 Angular Material Wiki 中的 Datepicker 示例一样，而不是在模块中定义 DateAdapter 和 Date Formats 提供程序，而是在组件中定义它，然后它就起作用了。

【讨论】：

如果你想为每个输入控件设置不同的日期格式，只需使用下面的代码。你可以为输入控件设置任何日期格式，你想要什么日期格式。

【参考方案3】：

<mat-form-field><input
    type="text"
    [value]="VisitorsCurrentDate"
    class="visit_date"
    (click)="patientVisitPicker.open()"
    style="text-transform: capitalize"
    style="border: none" /><input
    matInput
    [matDatepicker]="patientVisitPicker"
    (dateInput)="setPatientsVisitsDateTiming($event.value)"
    style="display: none"
    class="mat_class" /><mat-datepicker-toggle
    matSuffix
    [for]="patientVisitPicker"
    style="display: none"
  ></mat-datepicker-toggle
  ><mat-datepicker
    [dateClass]="dateClass"
    #patientVisitPicker
    style="display: none"
  ></mat-datepicker
></mat-form-field>

public setPatientsVisitsDateTiming(date:any)
    this.VisitorsCurrentDate = moment(date, "D-M-YYYY").format("DD MMM YYYY");

【讨论】：

如果你想为每个输入控件设置不同的日期格式，只需使用上面的代码。你可以为输入控件设置任何日期格式，你想要什么日期格式。试试这个方法......