Есть ли способ фильтрации таблицы материалов по дате - PullRequest
Новая
       15

Есть ли способ фильтрации таблицы материалов по дате

1 голос
/ 10 июня 2019

Я пытаюсь отфильтровать таблицу по времени начала и окончания, используя 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 Ответ

1 голос
/ 10 июня 2019

Используйте формат M/d/yyyy для анализа даты из DatePicker, например: 

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

Согласно вашим данным JSON, на самом деле они не содержат начальных нулей.

Working_Demo

Я выбрал 1st May 2019 в поле выбора даты и получил первую запись в результате.

EDIT:

Вам нужно зарегистрировать 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();
...