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>

Answer 2

我知道这已经很老了，并且自Angular 6+起，您就不能再混合使用ngModel和reactforms了。这是一个带有一点CSS调整的工作区，因此datepicker弹出窗口仍显示在正确的位置。

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。

在有角材料的两个datepickers与另外日期格式

2 个答案: