更改材料角度日期選擇器的語言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

回答

相關問題