Angular Material DatePicker Autocomplete

trying to implement a searchbar where you can search by the item's name or by a date. just wanted to know if there's a way to disable the datepicker autocomplete?

problem is : - if i do a search by date, it's fine - if i do a search by name it's ok... untill i loose focus of search input, then it autocomplete with a date

example : if i search an item with 1234 in it and loose focus of the search input, it will complete with 01/01/1234 and do the research with it...

   <mat-form-field id="search">
      <input i18n-placeholder="Search@@searchBar" matInput placeholder="Search..."
      [matDatepicker]="picker" (dateInput)="searchDate($event)"  #input />
      <mat-icon matPrefix>search</mat-icon>
    </mat-form-field>

    <span>
      <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker ></mat-datepicker>
    </span>

Maybe i'm just doing it the wrong way...? Regards j0w

You should create an hidden input, bound to the datepicker, and update the value of the autocomplete when the user choses a date. The first input, on the other side, should not be bound to the datepicker, since it is an autocomplete. Here is a stackblitz example :

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

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

<input type="hidden" [matDatepicker]="picker" placeholder="Choose a date" (dateChange)="autocomplete.value = toFormattedDate($event.value)">