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

回答1:

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)">

来源：https://stackoverflow.com/questions/51514645/angular-material-datepicker-autocomplete

标签

angular

autocomplete

datepicker

angular-material