材質の日付ピッカーの言語を変更する4

Question

材質の日付ピッカーの言語を変更する方法角度？私はここで角材料2 のドキュメントで見つけることができません はhttps://plnkr.co/edit/unzlijtsHf3CPW4oL7bl?p=preview

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

Answer 1

plunkrで申し訳ありませんが、これはコメントする必要がありますが、私は最低限の評判は必要ありません。

ここでは、上記のコメントに記載されている@Gregor Doroschenkoとしてmoment.jsとともに使用することを含めて、DatePickerに関する良いブログ投稿があります。

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

Answer 2

MD-日付ピッカーは、任意の言語（list of locale）を設定するために使用することができるsetLocale方法を提供します。

ここでは「FR」にロケールを設定する例です：心に留めておくべき

export class DatepickerOverviewExample { 

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

} 

一つ、MD-DatePickerののデフォルトの日付解析形式は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