带有不同日期格式的角形材料上的两个日期选择器 [英] 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.

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

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