问题描述
限时送ChatGPT账号..尝试实现一个搜索栏,您可以在其中按项目名称或日期进行搜索.只是想知道是否有办法禁用日期选择器自动完成功能?
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
示例:如果我搜索一个包含 1234 的项目并且搜索输入的焦点松散,它将以 01/01/1234 完成并使用它进行研究...
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>
也许我只是做错了...?问候j0w
Maybe i'm just doing it the wrong way...? Regards j0w
推荐答案
您应该创建一个隐藏的输入,绑定到日期选择器,并在用户选择日期时更新自动完成的值.另一方面,第一个输入不应绑定到日期选择器,因为它是自动完成的.这是一个stackblitz 示例 :
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)">
这篇关于Angular Material DatePicker 自动完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论