有没有一种方法可以根据日期过滤物料表

时间:2019-06-10 06:58:17

标签: angular filter datepicker angular-material

我正在尝试使用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);
};

1 个答案:

答案 0 :(得分:1)

使用M/d/yyyy格式从DatePicker解析日期,例如:

this.datepipe.transform(filterValue, 'M/d/yyyy');

根据您的JSON数据,它实际上不包含前导零。

Working_Demo

我从日期选择器中选择了1st May 2019,并在结果中获得了第一条记录。

  

编辑:

您需要一次注册filterPredicate,然后才能设置filter的{​​{1}}属性

因此,只需使用DataSourceconstructor这样的方法进行注册即可:

ngOnInit()

和点击事件只是:

constructor(public datepipe: DatePipe) {
    this.dataSource.filterPredicate = (data, filter: string) => 
        !filter || data.startTime.includes(filter);
}