Question

我正在尝试从material2为闪亮的新日期选择器实现我自己的日期格式。根据文档，我必须提供我的MD_DATE_FORMATS版本：

providers: [
  {provide: DateAdapter, useValue: NativeDateAdapter },
  {provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS },
],

当我使用默认实现时：

export const MD_NATIVE_DATE_FORMATS: MdDateFormats = {
  parse: {
    dateInput: null,
  },
  display: {
    dateInput: {year: 'numeric', month: 'numeric', day: 'numeric'},
    monthYearLabel: {year: 'numeric', month: 'short'},
    dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
    monthYearA11yLabel: {year: 'numeric', month: 'long'},
  }
};

我收到日期输入为空的错误。但它到底是什么类型的？文档说任何。

如果我尝试放置一些虚拟函数，我会收到错误：_dateAdapter.parse is not a function.

function dateInput() {
    return 'ddd';
}
const MY_DATE_FORMATS: MdDateFormats = Object.assign({}, MD_NATIVE_DATE_FORMATS, {parse: dateInput });

如何让它发挥作用？

Answer 1

非常感谢推动解决方案的@MariusR。如上所述，您需要提供自己的日期适配器。从plunkr，这很简单如下：

export class OurDateAdapter extends NativeDateAdapter {
  parse(value: any): Date | null {
    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);
  }
}

这可以是您的任何TS文件，只需要在组件模块中使用日期选择器提供：

  providers: [
    {provide: DateAdapter, useClass: OurDateAdapter}
  ]

在组件中，您需要在构造函数中使用它：

  constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('en-GB');
  }

可以在这里收集语言环境列表，plunkr示例使用葡萄牙语，我的是英国英语。

http://www.i18nguy.com/unicode/language-identifiers.html

MariusR，鞠躬，为什么官方文件不能有这个？

Answer 2

在您的代码中，您应该替换

{provide: DateAdapter, useValue: NativeDateAdapter },

与

{provide: DateAdapter, useClass: NativeDateAdapter },

因为NativeDateAdapter是一个类而不是常量。

这应解决您的问题，.parse不是函数错误。

我无法复制日期输入为空错误。可能是由于相同的useClass问题，但如果您仍然遇到错误，您可以定义dateInput，如

parse: {
  dateInput: {year: 'numeric', month: 'numeric', day: 'numeric'},
},

或

的变体

parse: {
  dateInput: 'YYYY-MM-DD',
},

Answer 3

Angular实现默认使用Javascript日期实现，这意味着您可能希望创建自己的MdDateFormats和DateAdapter实现，以获得日期的自定义表示。正如@MariusR所说：

在您的代码中，您应该替换

{provide: DateAdapter, useValue: NativeDateAdapter }，

{provide: DateAdapter, useClass: NativeDateAdapter }，

我已经制作了project来展示如何实施自定义MdDateFormats和DateAdapter（实施日期以适应＆＃39; es-UY＆＃39;语言环境）。它使用Moment.js来表示其他日期格式，以及它可以完全自定义以满足您的需求的实现。自定义区域设置文件为here。

如何为datepicker实现MD_DATE_FORMATS？

3 个答案: