為 md-datepicker 設定不同的語言環境

此示例需要匯入 DateAdapter。

import {DateAdapter} from '@angular/material';

datepicker.component.html：

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

<p></p>
<div>
  <button md-raised-button (click)="setLocale('en')">English - US</button>
  
  <button md-raised-button (click)="setLocale('es')">Spanish</button>

  <button md-raised-button (click)="setLocale('zh')">Chinese</button>

  <button md-raised-button (click)="setLocale('nl')">Dutch</button>
  
  <button md-raised-button (click)="setLocale('bn')">Bengali</button>
  
  <button md-raised-button (click)="setLocale('hi')">Hindi</button>
  
  <button md-raised-button (click)="setLocale('ar')">Arabic</button>
</div>

datepicker.component.ts：

import {Component} from '@angular/core';
import {DateAdapter} from '@angular/material';

@Component({
  selector: 'datepicker-overview-example',
  templateUrl: './datepicker-overview-example.html',
  styleUrls: ['./datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {
  
  constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('en');   
  }
  
  setLocale(val){
    console.log(val);
    this.dateAdapter.setLocale(val); 
  }
  
}

現場演示

可以在此處找到區域設定語言程式碼列表。