In date picker, year accepts more than 4 digits

[irfanalam]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When you select the date and try to change year manually it should accept only 4 digits.

Current Behavior

When you select the date and try to change year manually it accepts more than 4 digits.

Steps to Reproduce (for bugs)

1. select date
2. change year manually
3. try to input more than 4 digits

Context

Your Environment

Tech	Version
Material-UI	v1.0.0-beta.35
React	16.2.0
browser
etc

[oliviertassinari]

@irfanalam Are you referring to our native date-picker example in the documentation? I fear there is nothing we can do about it here. It could be an upstream limitation on the browser side. The community offers some alternative to the native date-picker.

[MihailHaev]

@irfanalam Are you referring to our native date-picker example in the documentation? I fear there is nothing we can do about it here. It could be an upstream limitation on the browser side. The community offers some alternative to the native date-picker.

In native date-picker has attribute max or min, what can fix this problem, but it attributies doesn't apply to TextFiled

[danidanimoraes]

Workaround: Limit dates with min-max:

<TextField
  InputProps={{inputProps: { min: "2020-05-01", max: "2020-05-04"} }}
  type="date"
 (...)
/>

In my case, I only used max: 31-12-9999

[Rits1501]

restrictYearInput(event: KeyboardEvent) {
const input = event.target as HTMLInputElement;
const maxLength = 4;
if (input.value.length >= maxLength && event.key >= '0' && event.key <= '9') {
event.preventDefault();
}
}
try this function it will work
mat-form-field appearance="outline">
Select DateTime
<input type="date" formControlName="fromDate" (change)="dateEvent($event)" [min]="minDate"
matInput placeholder="Select Booking Date" (keypress)="restrictYearInput($event)">
<mat-error *ngIf="formGroup.get('fromDate')?.hasError('required')">
From Date is required

<mat-error *ngIf="formGroup.get('fromDate')?.errors?.['invalidDate']">Invalid date
selection