Фильтрация результатов таблицы по дате, введенной в угловых 6+

Question

В моем приложении Angular 6 есть таблица, заполняемая внутренними данными (в виде JSON).Кроме того, я добавил элемент управления формы ввода типа «текст» для фильтрации результатов на основе текста в определенном столбце.В основном этот фильтр происходит при каждом (ключевом) событии.Теперь мне нужно добавить элемент управления формы ввода типа «дата» для фильтрации результатов по датам в другом столбце моей таблицы.

Разметка шаблона, которую я использую для фильтрации текста -

   <p>
      <input
        #query
        (keyup)="filter(query.value)"
        type="text"
        class="form-control"
        placeholder="Search Venues by Name...">
  </p>

Обработчик событий, который я использую для этой фильтрации в соответствующем компоненте -

filter(query: string) {
    this.filteredVenues = (query) ?
      this.venues.filter(v => v.name.toLowerCase().includes(query.toLowerCase())) :
      this.venues;
  }

Итак, моя фильтрация текста работает нормально.Мне нужна помощь в том, как я могу сделать такую ​​же фильтрацию, если я введу дату.Формат даты в моем JSON выглядит следующим образом:

2019-01-28T01:26:12.738Z
2018-07-15T00:10:10.749Z
2019-01-28T01:21:06.223Z

Я пытался использовать тот же подход, что и выше (фильтрация текста), но я сталкиваюсь с трудностями -

1. Событие Keyup будетне вызывает
2. несовместимость формата даты между тем, что я ввел, и тем, что хранится в бэкэнде. JSON

Вот код, который я написал для фильтрации даты.Я уверен, что многое из того, что мне нужно изменить, приведено ниже.

Шаблон -

<input
    #queryDate
    (keyup)="filterDate(queryDate.value)"
    type="date"
    class="form-control"
    placeholder="Search Venues by Date...">

Component.ts -

filterDate(queryDate: date) {
    this.filteredVenues = (queryDate) ?
    this.venues.filter(v => v.datecreated.includes(queryDate)) :
    this.venues;
  }

Кто-нибудь может мне помочькак заставить это работать (фильтрацию) для вышеупомянутых форматов даты?

Answer 1

Я попробовал следующее, и это сработало -

Код шаблона -

<input
  #queryDate
  (change)="filterDate(queryDate.valueAsDate)"
  type="date"
  class="form-control"
  placeholder="Search Venues by Date...">

Код TypeScript -

filterDate(queryDate: any) {
    this.filteredVenues = (queryDate) ?
    this.venues.filter(v => v.datecreated.includes(queryDate.toISOString().split('T')[0])) :
    this.venues;
  }

Answer 2

Попробуйте это:

filterDate(queryDate: date) {
this.filteredVenues = (queryDate) ?
this.venues.filter(v => new Date(v.datecreated) == queryDate) :
this.venues;

}