Angular Material - Set different locale for md datepicker in angular material2 - Angular Material Tutorial
Set different locale for md datepicker in angular material2
This example requires importing DateAdapter
import {DateAdapter} from '@angular/material';Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
datepicker.component.html:
import {DateAdapter} from '@angular/material';
<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>
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
datepicker.component.ts:
import {DateAdapter} from '@angular/material';
<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>
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);
}
}