如何实现datepicker的MD_DATE_FORMATS？

我试图从material2实现我自己的日期格式闪亮的新datepicker。根据文档我必须提供MD_DATE_FORMATS的我的版本：如何实现datepicker的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 });

如何使它工作？

来源

2017-05-26 charlie_pl

还不清楚这个日期选择器是一个很好的工作示例，因为它也需要字符串来解析出真实日期 –

在你的代码应该

{provide: DateAdapter, useClass: NativeDateAdapter },

更换

{provide: DateAdapter, useValue: NativeDateAdapter },

为NativeDateAdapter是一类，而不是一个常数。

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

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

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

或谁推解决方案

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

来源

2017-05-29 11:54:03 MariusR

您的提示非常有帮助，但即使按照建议应用了解析函数之后：'YYYY-MM-DD' ，结果仍显示为“DD-MM-YYYY”。你知道为什么吗？ –

@charlie_pl默认情况下，我获得MM/DD/YYYY。这可能取决于计算机设置吗？ – jbojcic

也许，这就是为什么我想重写它。当我输入YYYY-MM-DD时，我希望得到YYYY-MM-DD，而不是MM-DD-YYYY或MM-DD-YYYY。 –

非常感谢@MariusR的变化。如上所述，您需要提供自己的日期适配器。

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} 
    ]

从plunkr，如下这很简单在你的组件，你需要在构造函数中使用它：

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

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

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

MariusR，大家鞠躬，为什么不能在官方的文档有这个？

来源

2017-06-12 15:03:07 PeterS

今天绝对救了我。我改变了解析来促进使用' - '而不是'/'的'nl'语言环境。我也覆盖了format（）来显示一个特定的值。 – Carsten

@Carsten请你分享你的代码片段。 –

@Aamirshah在这里你去：https://jsfiddle.net/8uL6ttkx/ – Carsten

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

In your code you should replace the

{provide: DateAdapter, useValue: NativeDateAdapter } , with

{provide: DateAdapter, useClass: NativeDateAdapter } ,

我做了一个project展示如何实现自定义MdDateFormats和DateAdapter（实施日期，以适应 'ES-UY' 区域）。它使用Moment.js来表示其他日期格式，并且它的实现可完全自定义以满足您的需求。自定义区域设置文件是here。

来源

2017-07-11 15:28:19

如何实现datepicker的MD_DATE_FORMATS？

回答

相关问题