title: angular 5 how show datepicker in french
body: <pre class="lang-ts prettyprint-override"><code>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
    }
  
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field&gt;
    &lt;input 
  
    matInput [matDatepicker]="picker" placeholder="Choose a date"&gt;
    &lt;mat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
    &lt;mat-datepicker #picker  (selectedChanged)="changer($event)"&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  
  {{  matDatepicker}}
  </code></pre>
  
  <p>I would like to show the Angular Material date picker component in French locale. How can this be done?</p>