Angular Material Datepicker上的自定义输入标签

时间:2019-01-28 09:25:44

标签: angular datepicker angular-material angular-material-6

我已将Angular Material日期选择器添加到我的页面。我想知道是否可以将输入文本从解析日期更改为更友好的名称?例如如果用户单击今天的日期而不是显示28/01/2019,则可能显示“今天”或“昨天”等。

我当前的代码很基本,我在HTML中有一个简单的日期选择器,并制作了一个客户日期适配器以将输入的日期设置为英国,这一切正常,但是我想知道今天/昨天的解析是否可行以及在哪里进行是最好的地方?

HTML

<div [formGroup]="formGroup">
    <mat-form-field>
      <input matInput formControlName="date" [matDatepicker]="picker" placeholder="Choose a date" (click)="picker.open()">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</div>

日期适配器

export class CustomDateAdapter extends NativeDateAdapter {
    parse(value: any): Date | null {
        console.log(value);
        if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
            const str = value.split('/');
            return new Date(Number(str[2]), Number(str[1]) - 1, Number(str[0]), 12);
        }
        const timestamp = typeof value === 'number' ? value : Date.parse(value);
        return isNaN(timestamp) ? null : new Date(timestamp);
    }
}

0 个答案:

没有答案