时间戳

首页 > 解决方案 > 根据以角度 6+ 输入的日期过滤表结果

javascript - 根据以角度 6+ 输入的日期过滤表结果

问题描述

我的 Angular 6 应用程序有一个用后端数据填充的表（以 JSON 形式出现）。此外，我添加了一个“文本”类型的输入表单控件，以根据特定列上的文本过滤结果。基本上这个过滤器发生在每个（keyup）事件上。现在，我需要添加一个“日期”类型的输入表单控件，以根据表格另一列中的日期过滤结果。

我用于文本过滤的模板标记 -

   <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...">

组件.ts -

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

谁能指导我如何使上述日期格式正常工作（过滤）？

标签： javascripthtmlangulardatefiltertablefilter

解决方案

我尝试了以下方法并且有效 -

模板代码 -

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

打字稿代码 -

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

推荐阅读