具有不同日期格式的角度材料上的两个日期选择器

Question

我试图在 Angular 上使用不同的日期格式获取两个日期选择器，问题是唯一可以更改格式的方法是使用自定义的 DataAdapter，但这适用于所有日期选择器。

任何的想法？

谢谢！

Answer 1

您可以添加一个额外的输入字段来显示日期选择器。并将原始日期选择器设置为隐藏。

这将让您为有界属性设置单向绑定，并让您应用“日期”类型的管道。在该管道中，您可以选择任何格式。

<mat-form-field>
    <input matInput [matDatepicker]="picker" [(ngModel)]="myDate" placeholder="Date" hidden=true [readonly]="true">
    <input matInput [ngModel]="myDate | date : 'dd/MM/y'" [ngModelOptions]="{standalone: true}" placeholder="Date" (click)="picker.open()" [readonly]="true">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker name="myDate" ngDefaultControl></mat-datepicker>
</mat-form-field>