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

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

要解析用户手动输入，您需要在自定义 NativeDateAdapter 中覆盖以下方法

解析（值：任意）：日期 |空

你可以做类似的事情（或者更好地使用像 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 2

使用语言环境试试这个

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

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

Answer 3

加入@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' }]

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

Angular 5 Material date picker does not support "DD/MM/YYYY" Format using input

datepicker

angular-material

angular

angular5