Question

我的问题是日期选择器不支持使用输入的“DD / MM / YYYY”格式，仅支持使用日历。我需要日期选择器允许用户使用文本输入输入日期'25 / 11/2016'。

providers: [
{provide: DateAdapter, useClass: MyDateAdapter},
{provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMAT }, 
{provide: MAT_DATE_LOCALE, useValue: 'fr-FR'},],

和自定义日期格式

 export const CUSTOM_DATE_FORMAT = {
  parse: {
    dateInput: 'DD/DD/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    /* monthYearLabel: 'MMMM YYYY', */
    dateA11yLabel: 'DD/MM/YYYY',
    /* monthYearA11yLabel: 'MMMM YYYY', */
  },
};

日期适配器

import { NativeDateAdapter } from "@angular/material";

export class MyDateAdapter extends NativeDateAdapter {
    format(date: Date, displayFormat: Object): string {
        if (displayFormat == "input") {
            let day = date.getDate();
            let month = date.getMonth() + 1;
            let year = date.getFullYear();
            return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
        } else {
            return date.toDateString();
        }
    }

    private _to2digit(n: number) {
        return ('00' + n).slice(-2);
    } 
 }

Answer 1

添加@Ngmodule

export const MY_FORMATS = {
    parse: {
        dateInput: 'MM.DD.YYYY'
    },
    display: {
        dateInput: 'MM.DD.YYYY',
        monthYearLabel: 'MM YYYY',
        dateA11yLabel: 'MM.DD.YYYY',
        monthYearA11yLabel: 'MM YYYY'
    }
};

  providers: [{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }, { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' }]

Answer 2

要解析用户手动输入，您需要在自定义NativeDateAdapter

中覆盖以下方法

parse（value：any）：日期|空

您可以执行类似的操作（或者更好地使用类似moment.js的日期库进行解析）：

  export class CustomDateAdapter extends NativeDateAdapter {
    parse(value: any): Date | null {
      if (!value) { return null; }
      return this.toDate(value);
    }

    private toDate(dateStr) {
      const [day, month, year] = dateStr.split(/[-\/.]/);
      return new Date(year, month - 1, day);
    }
    ......................
  }

或者，您可以使用MomentDateAdapter

https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats

这是一个例子https://stackblitz.com/angular/qdbqggxyelv?file=app%2Fdatepicker-formats-example.ts

Answer 3

使用区域设置

尝试此操作

import { DateAdapter } from '@angular/material';

constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('your locale');
}

Angular 5 Material日期选择器不支持使用输入的“DD / MM / YYYY”格式

3 个答案: