Angular Material DatePicker 自动完成

Question

尝试实现一个搜索栏，您可以在其中按项目名称或日期进行搜索。只是想知道是否有办法禁用日期选择器自动完成功能？

问题是： - 如果我按日期搜索，那就没问题了 - 如果我按名称进行搜索，那就可以了...直到我失去搜索输入的焦点，然后它会自动完成日期

示例： 如果我搜索一个包含 1234 的项目并且搜索输入的焦点松散，它将以 01/01/1234 完成并用它进行研究...

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

也许我只是做错了方法......？ 问候 j0w

Answer 1

您应该创建一个隐藏输入，绑定到日期选择器，并在用户选择日期时更新自动完成的值。另一方面，第一个输入不应绑定到日期选择器，因为它是自动完成的。这是一个 stackblitz 示例：

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

Answer 2

这个问题在材料日期选择器中是否仍然存在，如果是的话，

Ngmodel 绑定在您的示例中不起作用，有什么想法吗？