Hide or disable Angular Material date-range-picker auto-fill date (01/01/2001)

230 views Asked by At

I am using angular material date range picker which has start and end date picker. When I select the date from date picker it is working perfectly.

But when I started to type month (MM/DD/YYYY) and focus out the input field or click outside of the input area the date get auto-filled with "01/2001". For example I type 12 and click outside of the input field the date gets auto-filled with "12/01/2001".

How could I hide wrong dates that are auto-filled for date range picker, and instead keep the input field as I typed when the field is out of focus?

There is a solution for simple date picker, but not for date range picker: stackblitz example

HTML file

<mat-form-field class="form-input">
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input
      matStartDate
      formControlName="start"
      placeholder="MM/DD/YYYY"
      maxlength="10"
    />

    <input
      matEndDate
      formControlName="end"   
      placeholder="MM/DD/YYYY"
      maxlength="10"
    />
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker xPosition="start" yPosition="below">
    <mat-date-range-picker-actions>
      <button mat-button matDateRangePickerCancel>Cancel</button>
      <button mat-raised-button color="primary" matDateRangePickerApply>
        Apply
      </button>
    </mat-date-range-picker-actions>
  </mat-date-range-picker>

  @if (range.controls.start.hasError('matStartDateInvalid')) {
  <mat-error>Invalid start date</mat-error>
  } @if (range.controls.end.hasError('matEndDateInvalid')) {
  <mat-error>Invalid end date</mat-error>
  }
</mat-form-field>
0

There are 0 answers