具有不同日期格式的角度材料上的两个日期选择器 [英] Two datepickers on angular material with different date format

问题描述

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

I'm trying to get two datepickers on Angular with different date format, the issue is that the only way that is possible to change the format is with a DataAdapter that's customize, but that applies to all the datepickers.

有什么想法吗?

谢谢！

推荐答案

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

You can add an extra input field for showing the date picker. And setting the original datepicker as hidden.

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

This will let you set the one way binding for the bounded property and let you apply a pipe of 'date' type. Within that pipe, you can have any format of your choice.

<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>

这篇关于具有不同日期格式的角度材料上的两个日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！