How to change angular material datepicker format

by

You need to provide an object containing the formats you wish to use. The object should look something like:

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'YYYY',
  },
};

You then need to add that in to your providers array, like so:

  import { MAT_DATE_FORMATS } from '@angular/material/core';
  import { MomentDateAdapter } from '@angular/material-moment-adapter';

  //...

  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],

Here is a StackBlitz demo to show it working

More Related Contents:

  1. Angular Material: mat-select not selecting default
  2. Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’ – Angular2 Material Autocomplete issue
  3. How can I select an element in a component template?
  4. How do I share data between components in Angular 2?
  5. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  6. Read response headers from API response – Angular 5 + TypeScript
  7. How to dynamically add a directive?
  8. angular 2 sort and filter
  9. Ionic 2 Form goes up when keyboard shows
  10. When to use square brackets [ ] in directives @Inputs and when not?
  11. Angular2 – Interaction between components using a service
  12. Reactive forms – disabled attribute
  13. How to implement sleep function in TypeScript?
  14. Testing error case with observables in services
  15. Multiple canActivate guards all run when first fails
  16. Build Angular2 HTML and TypeScript to a single file
  17. angular keyvalue pipe sort properties / iterate in order
  18. Angular subscribe elegant
  19. How to allow access outside localhost
  20. Angular – Make multiple HTTP calls sequentially
  21. @types/googlemaps/index.d.ts’ is not a module
  22. Angular 4+ using Google Analytics
  23. Rxjs Retry with Delay function
  24. How to run the Dist Folder on Local Machine in Angular 6+?
  25. SassError: Can’t find stylesheet to import. @use ‘~@angular/material’ as mat;
  26. How to delete a field in a Firestore Document?
  27. Angular2: use [(ngModel)] with [ngModelOptions]=”{standalone: true}” to link to a reference to model’s property
  28. Angular 2 disable sanitize
  29. Can I use Angular i18n to translate string literals in typescript code
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment