mat datepickerを使用して、開始時刻と終了時刻に基づいてテーブルをフィルタリングしようとしています。しかし、それは機能していません。これは私のhtmlコードです-
<mat-form-field><input matInput [matDatepicker]="dp1" (keyup)="dateFilter($event.target.value,'start')" (dateInput)="addEvent($event.target.value, $event)" placeholder="Choose a date"><mat-datepicker-toggle matSuffix [for]="dp1" ></mat-datepicker-toggle<mat-datepicker #dp1 ></mat-datepicker>
これは、動作している日付を手動で入力するための私のtsファイルコードです-
dateFilter(filterValue : String,input) {
debugger;
this.dataSource.filter = filterValue.trim().toLowerCase();
if(input=='start'){
this.dataSource.filterPredicate = function(data, filter: string): boolean {
return data.startTime.toLowerCase().includes(filter); };} else{ this.dataSource.filterPredicate = function(data, filter: string): boolean {
return data.endTime.toLowerCase().includes(filter);
};
} }
動作していない日付ピッカーから日付を選択するこの関数-
addEvent(filterValue: string, event: MatDatepickerInputEvent<Date>) {
debugger;
console.log(event.value);
if(event.value!=undefined){
filterValue =this.datepipe.transform(filterValue, 'MM/dd/yyyy');
}
this.dataSource.filter = filterValue.trim();
this.dataSource.filterPredicate = function(data, filter: string): boolean {
return data.startTime.includes(filter);
};
次のM/d/yyyyように、formatを使用してDatePickerから日付を解析します。
this.datepipe.transform(filterValue, 'M/d/yyyy');
JSONデータによると、実際には先行ゼロは含まれていません。
1st May 2019日付ピッカーから選択して、結果の最初のレコードを取得しました。
編集：
filterPredicate一度登録する必要があり、その後のfilterプロパティを設定することができますDataSource
だからそれを登録しconstructorたりngOnInit()する方法のように：
constructor(public datepipe: DatePipe) {
this.dataSource.filterPredicate = (data, filter: string) =>
!filter || data.startTime.includes(filter);
}
そしてクリックイベントでちょうど：
this.dataSource.filter = filterValue.trim();
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加