更改材料角度日期选择器的语言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>
对不起,这应该是一个评论,但所需的最低限度的声誉,我没有。
以下是DatePicker上的一篇博文,包括在上面的评论中提到的@Gregor Doroschenko与moment.js一起使用它。
https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3
谢谢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}],
})
是否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