5

I am using angular material/mat-datepicker in my project and whenever the user enters one digit inside of it, and goes out of focus - the date picker is auto completing with a random date.

Example

Just enter 1 and go out of focus, or enter 5/5/20

The date picker is adding date automatically

Update: Also I am using reactive forms and I'm validating the input with that approach

Can I disable this ?

JustDontKnow
  • 321
  • 3
  • 13
  • Do you mean, if you enter `5/5/20` and it turns into: `5/5/2020`? – Maihan Nijat Nov 20 '18 at 13:18
  • 1
    Possible duplicate of [Angular Material DatePicker Autocomplete](https://stackoverflow.com/questions/51514645/angular-material-datepicker-autocomplete) – User3250 Nov 20 '18 at 13:19
  • yes, but on different variations it returns different dates - however, it doesn't matter - I want to force the user to enter a whole valid date – JustDontKnow Nov 20 '18 at 13:19
  • and btw I'm not seeing this a duplicate because the accepted answer there works only for one scenario, what about reactive forms for instance – JustDontKnow Nov 20 '18 at 14:49
  • @JustDontKnow Reactive forms case isn't mentioned in the question or in the link u provided. Hence marked as duplicate. – User3250 Nov 21 '18 at 02:41
  • The question that you provided is just a workaround (it can be used in one case), hence it is not the actual solution - so before voting for duplicate see and try to understand the problem, along with the proved solution – JustDontKnow Nov 21 '18 at 16:05

1 Answers1

1

I know this is too late to answer this question. But, I had also faced the same kind of issue with reactive forms and disable the MatDatePicker autocomplete in the following way.

<mat-form-field>
   <input matInput #autocomplete placeholder="Choose a date" formControlName="datePicker">
   <input type="hidden" [matDatepicker]="picker" placeholder="Choose a date" formControlName="datePicker" (dateChange)="autocomplete.value = toFormattedDate($event.value)">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Create the following 'toFormattedDate' method in your component.

toFormattedDate(iso: string) {
  const date = new Date(iso);
  console.log(date);
  return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
}
Mihira Bandara
  • 11
  • 4