Question

我有dd / MM / yyyy格式的mat-date-picker，通过在日历中选择它可以正常工作，但是当我手动键入日期大于12的日期（例如，2019年1月27日）时，无效。 html：

<input matInput [matDatepicker]="picker" placeholder="מתאריך" formControlName="dateStart" [(ngModel)]="reportData.dateStart">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="month"></mat-datepicker>

module.ts：

{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' },

有什么可以帮助的吗？

Answer 1

我添加一个解析器：添加一个名为date-format.ts的新ts文件：

import { NativeDateAdapter } from '@angular/material';
import { MatDateFormats } from '@angular/material/core';
export class AppDateAdapter extends NativeDateAdapter {
       parse(value: any): Date | null {
        var dateParts = value.split("/");
        if (dateParts.length != 3)
            dateParts = value.split("-");
        if (dateParts.length != 3)
            return null;
        if (dateParts[2] >= 0 && dateParts[2] <= 50)
            dateParts[2] = '20' + dateParts[2];

        return new Date(dateParts[2], dateParts[1] - 1, +dateParts[0]);
    };
}

在app.component中：

import {DateAdapter, MAT_DATE_FORMATS} from '@angular/material/core';
import { AppDateAdapter, APP_DATE_FORMATS } from 'src/app/helpers/date-format';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    providers: [{provide: DateAdapter, useClass: AppDateAdapter},
        {provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS}]
})

手动键入时，mat-date-picker无效

1 个答案: