更改材料角度日期选择器的语言4

如何更改材料角度日期选择器的语言？我不能在文档中找到的角材2 这里是一个plunkr https://plnkr.co/edit/unzlijtsHf3CPW4oL7bl?p=preview 更改材料角度日期选择器的语言4

<md-input-container> 
    <input mdInput [mdDatepicker]="picker" placeholder="Choose a date"> 
    <button mdSuffix [mdDatepickerToggle]="picker"></button> 
</md-input-container> 
<md-datepicker #picker></md-datepicker>

来源

2017-08-17 Melchia

是否tryed使用'momentjs'？在你的'main.ts'中，你可以通过'{提供：LOCALE_ID，useValue：'fr-FR'}来提供一个区域设置。你应该通过'import'moment/locale/fr'来导入你的locale，然后你可以通过'moment.locale（'de'）;'将你的datepicker组件的locale设置为'ngOnInit'-hook。在你的datepicker组件中，你还应该通过'import *'作为瞬间从'moment'导入时刻;' –

这里是一个到momentjs文档的链接https://momentjs.com/docs/ –

通过设置moment.locale（' FR'）;它应该工作。 – Melchia

对不起，这应该是一个评论，但所需的最低限度的声誉，我没有。

以下是DatePicker上的一篇博文，包括在上面的评论中提到的@Gregor Doroschenko与moment.js一起使用它。

https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3

来源

2017-08-17 05:22:26 Sisky

谢谢sisky，Gregor的回答证明是正确的。但是你的博客帖子似乎给出了关于更改dateformat的更多细节。我会检查一下。 – Melchia

好的文章，bookamrked为未来。 –

MD-日期选择器提供setLocale方法，其可以被用于设置任何语言（list of locale）。

这里的设置区域为“FR”的例子：

export class DatepickerOverviewExample { 

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

}

有一点要记住，MD-日期选择器的默认日期解析格式为mm/dd/yyyy，所以如果一个区域有不同的日期格式（ 'fr'其dd/mm/yyyy），我们需要定义一个扩展NativeDateAdapter的类来解析新的日期格式。如果没有设置适当的日期格式，将会出现像这样的问题question。

import { NativeDateAdapter, DateAdapter, MD_DATE_FORMATS } from "@angular/material"; 

export class FrenchDateAdapter extends NativeDateAdapter { 
    parse(value: any): Date | null { 
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) { 
     const str = value.split('/'); 
     if (str.length < 2 || isNaN(+str[0]) || isNaN(+str[1]) || isNaN(+str[2])) { 
     return null; 
     } 
     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); 
    } 
} 

@Component({ 
    ... 
    providers: [{provide: DateAdapter, useClass: FrenchDateAdapter}], 
})

Plunker demo

来源

2017-08-17 12:16:35 Nehal

更改材料角度日期选择器的语言4

回答

相关问题