Change language of Datepicker of Material Angular 4

Sorry this should be a comment but I don't have the minimum reputation required.

Here is a good blog post on DatePicker including using it with moment.js as @Gregor Doroschenko mentioned in the above comment.

https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3

md-datepicker provides setLocale method which can be used to set any language (list of locale).

Here's an example of setting locale to 'fr':

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

One thing to keep in mind, md-datepicker's default date parsing format is mm/dd/yyyy, so if a locale has a different date format (for 'fr' its dd/mm/yyyy), we will need to define a class that extends NativeDateAdapter to parse the new date format. Without setting the proper date format, there will be an issue like this question.

import { NativeDateAdapter, DateAdapter, MD_DATE_FORMATS } from "@angular/material/core";
    
export class FrenchDateAdapter extends NativeDateAdapter {
  parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
      const str = value.split('/');
      if (str.length < 2 || isNaN(+str[0]) || isNaN(+str[1]) || isNaN(+str[2])) {
        return null;
      }
      return new Date(Number(str[2]), Number(str[1]) - 1, Number(str[0]), 12);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }
}

@Component({
  ...
  providers: [{provide: DateAdapter, useClass: FrenchDateAdapter}],
})

Plunker demo

Locale setting can be provided via MAT_DATE_LOCALE constant, but to change language dynamically you need to use DateAdapter as it is shown in https://material.angular.io/components/datepicker/overview#internationalization

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

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

  setFrench() {
    // Set language of Datepicker
    this.dateAdapter.setLocale('fr');
  }

}

Here is another example when you need to configure locale from external script:

<script>
  window.appConfig = {
    language: 'fr',
    // Other config options
    // ...
  };
<script>
<app-root></app-root>

In this case you should also use DateAdapter:

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

declare let window: any;

@Injectable()
export class AppConfigService {

  appConfig = window.appConfig;

  constructor(private dateAdapter: DateAdapter<any>) {
    // Set language of Datepicker
    this.dateAdapter.setLocale(this.appConfig.language);
  }

}

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

&

providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }]

Do this in tpv.modules.ts