angular 5 how show datepicker in french

Question

import { Component } from '@angular/core';
//DATE PICKER
// Custom DateAdapter

import { MatDatepickerModule, MatNativeDateModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS } from '@angular/material';

const MY_DATE_FORMATS = {
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' }
  },
  display: {
    dateInput: 'input',
    monthYearLabel: { year: 'numeric', month: 'short' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
};


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})



export class AppComponent {

  matDatepicker;
  date;

  ngOnInit(){
    this.date = new Date();
  }

  changer($event){
    this.matDatepicker =$event;
    console.log("******date selectionner",this.matDatepicker);
    console.log(this.matDatepicker.getTime()*0.001); //timestamps de la date picker
  }

}

<mat-form-field>
  <input 

  matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker  (selectedChanged)="changer($event)"></mat-datepicker>
</mat-form-field>

{{  matDatepicker}}

I would like to show the Angular Material date picker component in French locale. How can this be done?

Daniel W Strimpel Daniel W Strimpel · Accepted Answer · 2018-04-07T18:13:27

Refer to the documentation for the date picker: https://github.com/angular/material2/blob/master/src/lib/datepicker/datepicker.md#setting-the-locale-code

If you want to change it at runtime, you can inject the DateAdapter like so:

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

angular 5 how show datepicker in french

1 Answers