Angular Material DatePicker Autocomplete

Question

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

i'll just redirrect you to the doc examples where you can see it happens too i you start typing a date then loose focus of the input field : https://material.angular.io/components/datepicker/examples — j0w, Jul 25 '18 at 09:49
if you enter 123 then go out of the field you'll get 1/1/123. that's what i'd like to prevent for my case — j0w, Jul 25 '18 at 09:51

score 4 · Accepted Answer · answered Jul 25 '18 at 10:04

4

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

answered Jul 25 '18 at 10:04

Thanks @trichetriche for your answer! I modified it a bit by using ` return formatDate(date, 'dd/MM/yyyy', 'fr-FR' ).toString();` from `import { formatDate } from '@angular/common'` and it seems to work perfectly! – j0w Jul 25 '18 at 10:30
Thanks, seems like an easy way. For me, as in your stackblitz example, the problem is that the datepicker popup is positioned on position 0,0 and not under the input-field. – hgoebl May 23 '19 at 09:32
@hgoebl never encountered that. Please make a question with a [mcve], if you're looking for a resolution on it ! – May 23 '19 at 09:40
It's not a question, just a comment. The stackblitz is already a minimal reproducable example for not showing the popup under the visible date input field (Chrome 74, Win7). No action required for me. – hgoebl May 23 '19 at 11:33
Can somebody tell me now how to do it with multiple languages so multiple dateFormats? That does not work for me. Especially I need a validator for the input of the date now, if a user can type in the date – CptDayDreamer Jun 24 '19 at 06:35

Angular Material DatePicker Autocomplete

1 Answers1

Linked