0

I have the following code for a simple material datepicker:

<mat-form-field class="mat-form-field--block" floatLabel="always">
  <mat-label
    translate="DATE_OF_BIRTH"
  ></mat-label>
  <input
    matInput
    [matDatepicker]="dateOfBirth"
    [formControlName]="date_of_birth.name"
    placeholder="dd-mm-jjjj"
  />
  <mat-datepicker-toggle matSuffix [for]="dateOfBirth">
    <mat-icon
      matDatepickerToggleIcon
      fontSet="far"
      fontIcon="fa-calendar-day"
    ></mat-icon>
  </mat-datepicker-toggle>
  <mat-datepicker #dateOfBirth></mat-datepicker>
</mat-form-field>

The form is build using:

public form = this.fb.group({
  [this.date_of_bith.name]: [null, Validators.required],
});

public date_of_birth(): AbstractControl {
  return this.form.get(this.date_of_birth.name);
}

We are using the Luxon date adapter with no special options or formats set. The adapter is imported as:

import { MatLuxonDateModule } from '@angular/material-luxon-adapter';

Now the problem is when I enter e.g. 23 in the input and press the tab-key, the date is changed to today's date. How can I prevent this from happening?

Update: after searching some more it seems that the Luxon adapter first tries to parse the string as an ISO date. How can I disable this and only use the specified format?

Kees de Bruin
  • 175
  • 2
  • 16

1 Answers1

0

By default parsing is done in a forgiving way. You should enable strict mode to see the date converted only when the date is entered accurately.

@NgModule({
  imports: [
    MatDatepickerModule,
    MatMomentDateModule,
    ...
  ],
  providers: [
    {
      provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS,
      useValue: {strict: true} // <-- enable strict mode like this
    }
  ]
})

Stackblitz

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • I'm not using the moment.js adapter. Strict is not a valid option for the Luxon adapter – Kees de Bruin Aug 04 '22 at 08:46
  • @KeesdeBruin can you please mention which luxon package you're using? – Pankaj Parkar Aug 04 '22 at 08:57
  • @KeesdeBruin please have a look at stackblitz, I'm not sure which luxon-adapter you;re using. It would be great if you can pass on the name – Pankaj Parkar Aug 04 '22 at 09:10
  • I'm using the one from `@angular/material-luxon-adapter` – Kees de Bruin Aug 04 '22 at 10:07
  • @KeesdeBruin it seems you've not checked the stackblitz, it uses `@angular/material-luxon-adapter` and `{strict: true}` solved the problem, can you please recheck the same? – Pankaj Parkar Aug 06 '22 at 02:46
  • Either you have a different link but the shared link uses the moment and not luxon date adapter. Also, when you check the source code of the luxon adapter it doesn't support the `strict` option. – Kees de Bruin Aug 06 '22 at 09:14
  • For now I have just copied the luxon adapter code into my project and removed the ISO parsing so it will always use the specified date format. – Kees de Bruin Aug 06 '22 at 09:16
  • @PankajParkar I am using the Luxon adapter and added { provide: MAT_LUXON_DATE_ADAPTER_OPTIONS, useValue: {strict: true} // <-- enable strict mode like this } but its still I enter 11 in the input and date is changed to today's date. – DevSay Mar 30 '23 at 09:08
  • Can you please share what you have tried in stackblitz? – Pankaj Parkar Mar 30 '23 at 09:57
  • @NgModule({ providers: [ { provide: DatetimeAdapter, useClass: MatLuxonDatetimeAdapter }, { provide: MAT_LUXON_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true, strict: true } }, { provide: MAT_DATETIME_FORMATS, useValue: MAT_LUXON_DATETIME_FORMATS }, ] }) – DevSay Mar 30 '23 at 10:03
  • Added above in MatLuxonDateTimeModule file – DevSay Mar 30 '23 at 10:03
  • Can check this question? Added more details there https://stackoverflow.com/questions/75877233/if-a-user-directly-enters-two-digits-in-the-input-box-the-matdatepicker-uses-to/75877493#75877493 – DevSay Mar 30 '23 at 10:04