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
  
  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:

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

I would appreciate any help! :)

CodePudding user response：

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).

CodePudding user response：

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

`
@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