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

问题描述 投票:1回答:2

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

任何的想法?

谢谢!

angular datepicker angular-material
2个回答
3
投票

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

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

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

0
投票

我知道这是相当古老的,因为Angular 6+,你不能再混合ngModel和reactiveforms。这是一个有点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的想法。

© www.soinside.com 2019 - 2024. All rights reserved.