Angular Material Datepicker ISO_8601 Format

Question

I am using an angular material datepicker.

<mat-form-field>
<input matInput [matDatepicker]="picker" formControlName="form_birthdate" name="form_birthdate" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>

The date should be in ISO_8601 format. Is this possible?

Answer 1

I think you can just convert your date through standard JS function.

var event = new Date('05 October 2011 14:48 UTC');
console.log(event.toString());
// expected output: Wed Oct 05 2011 16:48:00 GMT+0200 (CEST)
// (note: your timezone may vary)

console.log(event.toISOString());
// expected output: 2011-10-05T14:48:00.000Z

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString

Answer 2

Works like this:

(in app.module.ts)

@NgModule({
  declarations: [AppComponent],
  imports: [
    // ...
  ],
  bootstrap: [AppComponent],
  providers: [
    // ... 
    {
      provide: MAT_DATE_FORMATS, // <-- import this reference
      useValue: {
        parse: {
          dateInput: 'YYYY-MM-DD', // <-- for manual editing
        },
        display: {
          dateInput: 'YYYY-MM-DD', // <-- for displaying
          monthYearLabel: 'YYYY',
          dateA11yLabel: 'LL',
          monthYearA11yLabel: 'YYYY',
        },
      },
    },
  ],
})

(manual editing also works)