Angular Material Datepicker : Set Locale

By Arvind Rai, June 29, 2020

This page will walk through setting locale in Angular Material Datepicker. The default locale can be changed at application module level as well as at run time in component. Angular material provides MAT_DATE_LOCALE whose value can be overridden in application module to change the default locale. To change locale at run time, we need to use setLocale method of DateAdapter.
On this page we will provide complete example to set locale such as fr-FR, en-US and hi-IN for our Datepicker.

Technologies Used
Set Locale in Application Module using MAT_DATE_LOCALE
Set Locale at Run Time using DateAdapter.setLocale()
Complete Example
Run Application
Reference
Download Source Code

Technologies Used

Find the technologies being used in our example.
1. Angular 10.0.0
2. Angular Material 10.0.0
3. Node.js 12.5.0
4. NPM 6.9.0

Set Locale in Application Module using MAT_DATE_LOCALE

The default locale of Datepicker is changed by overriding the value of MAT_DATE_LOCALE. By default MAT_DATE_LOCALE uses the value of LOCALE_ID from @angular/core. The LOCALE_ID contains the default locale code. We can override MAT_DATE_LOCALE value as following.

import { MAT_DATE_LOCALE } from '@angular/material/core';

@NgModule({
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'hi-IN'}
  ]
  ------
})
export class AppModule { }

In the above code MAT_DATE_LOCALE is using hi-IN locale. Now all the Datepickers of our application will show the view according to hi-IN locale.

Set Locale at Run Time using DateAdapter.setLocale()

We can set Datepicker locale at run time using setLocale method of the DateAdapter.
Import the DateAdapter in component.

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

Instantiate DateAdapter using constructor.

constructor(private dateAdapter: DateAdapter<any>) {
}

Create a method to call it at run time and use setLocale method of the DateAdapter.

frenchLocale() {
  this.dateAdapter.setLocale('fr-FR');
}

Now we can call the above method at run time to set fr-FR for Datepicker. For example we are setting this locale at button click.

<button type="button" mat-raised-button (click)="frenchLocale()">French</button>

Complete Example

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule }    from '@angular/forms'; 
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MAT_DATE_LOCALE } from '@angular/material/core';

import { AppComponent } from './app.component';
import { StudentComponent } from './student.component';

@NgModule({
  declarations: [
    AppComponent,
    StudentComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatInputModule, 
    MatDatepickerModule,
    MatNativeDateModule,
  ],
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'hi-IN'}
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

student.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';
import { StudentService } from './student.service';
import { DateAdapter } from '@angular/material/core';

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html'
})
export class StudentComponent implements OnInit {
  constructor(private dateAdapter: DateAdapter<any>,
     private formBuilder: FormBuilder,
     private studentService: StudentService) { }
  ngOnInit() {
  }
  studentForm = this.formBuilder.group({
    name: '',
    dateOfBirth: '',
    admissionDate: ''
  });
  onFormSubmit() {
    this.studentService.saveStudent(this.studentForm.value);
    this.studentForm.reset();
  }
  frenchLocale() {
    this.dateAdapter.setLocale('fr-FR');
  }
  engLocale() {
    this.dateAdapter.setLocale('en-US');
  }  
  hindiLocale() {
    this.dateAdapter.setLocale('hi-IN');
  }    
}

student.component.html

<h3>Datepicker Set Locale Demo</h3>
<form [formGroup]="studentForm" (ngSubmit)="onFormSubmit()">
  <mat-form-field>
    <mat-label>Student Name</mat-label>
    <input matInput formControlName="name">
  </mat-form-field>
  <br/>
  <mat-form-field>
    <mat-label>Date of Birth</mat-label>
    <input matInput [matDatepicker]="dob" formControlName="dateOfBirth">
    <mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle>
    <mat-datepicker #dob></mat-datepicker>
  </mat-form-field>
  <br/>
  <mat-form-field>
    <mat-label>Date of Admission</mat-label>
    <input matInput [matDatepicker]="admDate" formControlName="admissionDate">
    <mat-datepicker-toggle matSuffix [for]="admDate"></mat-datepicker-toggle>
    <mat-datepicker #admDate></mat-datepicker>
  </mat-form-field>
  <br/><br/>
  (Datepicker Locale)
  <button type="button" mat-raised-button (click)="frenchLocale()">French</button>
  <button type="button" mat-raised-button (click)="engLocale()">English</button>
  <button type="button" mat-raised-button (click)="hindiLocale()">Hindi</button>
  <br/><br/><button mat-raised-button>Submit</button>
</form>

student.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StudentService {
  saveStudent(student) {
    console.log(JSON.stringify(student));
  }
}

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
      <app-student></app-student>
  `
})
export class AppComponent {
}

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output using hi-IN locale.