Format Angular Material date to yyyy-mm-dd

Question

I would like to display my Angular Material date picker selected date to display the format as yyyy-mm-dd. I have tried a bunch of methods, successfully changing the date format, but I cannot get it to display the modified date format.

In this method I set both the date as the new format, as well as returning the value in the desired format:

  getValidDate(selectedDate) {
    const date = new Date(selectedDate);
    const dd = String(date.getDate()).padStart(2, '0');
    const mm = String(date.getMonth() + 1).padStart(2, '0');
    const yyyy = date.getFullYear();

    this.model.dob = yyyy + '-' + mm + '-' + dd;

    this.dateOfBirth.setValue(yyyy + '-' + mm + '-' + dd);
    return yyyy + '-' + mm + '-' + dd;
  }

I have also implemented a custom date for MAT_DATE_FORMATS:

  providers: [
    {
      provide: MAT_DATE_FORMATS,
      useValue: DATE_FORMATS
    }

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

This is my HTML:

<mat-form-field
  class="example-full-width"
  appearance="standard"
  matTooltip="Please select date of birth"
  matTooltipClass="tooltip-background"
>
  <mat-label>Date of birth</mat-label>
  <input
    matInput
    [matDatepicker]="picker"
    formControlName="dateOfBirth"
    appAutocompleteOff
    [max]="maxDate"
    (dateChange)=getValidDate(dateOfBirth.value)
    [(ngModel)]="model.dob"
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="picker"
  ></mat-datepicker-toggle>
  <mat-datepicker
    touchUi
    #picker>
  </mat-datepicker>
</mat-form-field>

So in essence I am trying to set the date format to display using 3 different methods:

Via [(ngModel)]
setValue: this.dateOfBirth.setValue(yyyy + '-' + mm + '-' + dd);
Via returning the formatted date by calling a method (getValidDate) returning and setting the date format.

I would appreciate any help! :)

Providing `MAT_DATE_FORMATS` is not enough. You need also to provide a `DateAdapter`. See this answer: https://stackoverflow.com/a/71175808/1135971 — andreivictor, Feb 23 '22 at 09:30
Full documentation: https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings — andreivictor, Feb 23 '22 at 09:33
@andreivictor Thank you for your first comment - that is the working solution. YAY! — onmyway, Feb 23 '22 at 10:31

score 2 · Answer 1 · edited Jan 07 '23 at 12:35

Maybe this isn't the best approach, but that says the official docs. You could just overwrite the MAT_DATE_LOCALE. Please checke de-DE and ja-JP options

By default, the MAT_DATE_LOCALE injection token will use the existing LOCALE_ID locale code from @angular/core. If you want to override it, you can provide a new value for the MAT_DATE_LOCALE token

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

@NgModule({
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
  ],
})
export class MyApp {}

https://material.angular.io/components/datepicker/overview Following example shows the date in yyy-mm-dd : Datepicker with different locale

This made no difference in my case. But thank you! :) – onmyway Feb 23 '22 at 10:31 — onmyway, Feb 23 '22 at 10:31

score 0 · Answer 2 · answered Feb 23 '22 at 09:37

0

This is what DatePipes are for! You can use the default formats and even customize yours.

You can also work with the format depending on the time-zone and the locale (to use the locale you need to import the corresponding data into the app.module.ts).

answered Feb 23 '22 at 09:37

1

Thank you for your answer. Can you please share the DatePipe implementation using my code as a complete answer. – onmyway Feb 23 '22 at 09:43
Sure! It should be something like this: You will have to set the dateToFormat in your ts first tho. – Feb 23 '22 at 09:52
I'd also recommend this video to visualize a DatePicker example! https://www.youtube.com/watch?v=lIAPYi33ISM – Feb 23 '22 at 09:53
I'm struggling to get DatePipe to work with Angular Material Reactive Forms., using my use case. Any suggestions would be appreciated :). – onmyway Feb 23 '22 at 10:21
1

Sorry to hear that! I'm not very sure if you have to specify also a [(bsValue)] due to DatePicker, but I'm glad that you got it working thanks to @andreivictor! – Feb 23 '22 at 11:59

score 0 · Answer 3 · edited Aug 18 '23 at 07:27

Use following way to convert date as yyyy-mm-dd . this will work .

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

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

@NgModule(
{
  
providers: [  
   { provide: DateAdapter, useClass: MomentDateAdapter },

    { provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS },
  ]

})

export class SharedModule { }

Install @angular/material-moment-adapter using npm i @angular/material-moment-adapter

Format Angular Material date to yyyy-mm-dd

3 Answers3