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

【问题标题】：Two datepickers on angular material with different date format具有不同日期格式的角度材料上的两个日期选择器
【发布时间】：2018-05-31 04:36:20
【问题描述】：

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

有什么想法吗？

谢谢！

【问题讨论】：

标签： angular datepicker angular-material

【解决方案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>

【讨论】：

【解决方案2】：

我知道这已经很老了，从 Angular 6+ 开始，你不能再混合使用 ngModel 和反应形式了。这是一个带有一点 css 调整的小变通方法，因此日期选择器弹出窗口仍然显示在正确的位置。

datepicker.component.html

<input #dateInput class="hidden-date-input" [matDatepicker]="datepicker" formControlName="myDatePicker" readonly>
<input placeholder="Choose a date" class="form-control" (click)="datepicker.open()" [readonly]="true" [value]="fullDate">
<mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
<mat-datepicker #datepicker disabled="false" (closed)="dateInput.blur()"></mat-datepicker>

datepicker.component.ts

...
export class DatepickerComponent {
get fullDate() {
    const dateValue = this.form.controls['myDatePicker'].value;
    if (!dateValue) { return ''; }
    return moment(dateValue).format('MM/DD/YYYY');
  }

css

.hidden-date-input {
  width: 0;
  border: none;
  padding: 0;
}

感谢PraSame 的想法。

【讨论】：