如何在 Angular 6 中通过简单的设置创建日期范围过滤器？

Question

我创建了一个小的 StackBlitz-Project 来代表我的情况。我想记录选定日期范围内的所有对象。 但是当我过滤我的对象时，我得到一个空数组作为结果。我想问您如何比较日期，因为根据您拥有的日期选择器，您会从日期选择器中获得不同的值。它还取决于您存储日期的格式（在本例中为字符串）。

你能帮我举个简单的例子吗？ https://stackblitz.com/edit/angular-hbqguu

编辑： 我创建了一个数组：

  public obj = [{
    name: "jan",
    date: "20.03.2010"
  },{
    name: "ion",
    date: "10.01.2003"
  },{
    name: "caesar",
    date: "01.02.2009"    
  },{
    name: "chris",
    date: "17.03.2015"    
  }]

如您所见，我正在尝试过滤具有“DD.MM.YY”格式的特定日期的对象。因此，我为两个不同的日期类型输入创建了函数。

<div>
  <p>Filtering by date range</p>
  <input type="date" (change)="changeFirstInput($event)"> - 
  <input type="date" (change)="changeSecondInput($event)">
  <span>
   <ul>
     <ng-container *ngFor="let o of obj">
    <li> {{o.name}} {{o.date}}</li>
    </ng-container>
  </ul>
  </span>
</div>

过滤函数

  public date1: Date = new Date("2000-01-01");
  public date2: Date = new Date();
  changeFirstInput(e){
    this.date1 = e.target.value;
    console.log(this.obj.filter(o => new Date(o.date) >= this.date1 &&
                                     new Date(o.date) <= this.date2  ));
  }
  changeSecondInput(e){
   this.date2 = e.target.value;
   console.log(this.obj.filter(o => new Date(o.date) >= this.date1 &&
                                     new Date(o.date) <= this.date2  ));
  } 

我的过滤器函数返回一个空数组[]。我不太确定如何比较日期，我想这取决于您上面提到的所有格式。

Answer 1

您可以使用 ngx-bootstrap 中的日期范围过滤器并在您的项目中简单地实现。

1) 此代码在您的 angualar 项目中插入 datepicker 库，因此将此代码添加到 app.module 文件中。

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@NgModule({
  imports: [
    BsDatepickerModule.forRoot(),
  ]
})
export class AppModule(){}

2) 此代码插入您的 app.componet.html 文件 [HTML 文件]。

<input type="text" placeholder="SELECT DATE" class="form-control" bsDaterangepicker (ngModelChange)="getByDate($event)"
                            [(ngModel)]="this.filters.date">

3) 此代码插入您的 app.component.ts 文件 [业务逻辑]

    public filters = <any>{
        "to": '',
        "from": '',
      };

 public getByDate(event) {
    this.filters['from'] = event[0];
    this.filters['to'] = event[1];
    console.log(this.filters['from'],'===',this.filters['to'])
  }

Answer 2

日期输入将返回日期值2020-01-25，您应该将日期都转换为正确的日期

console.log(this.obj.filter(o => new Date(o.date) >= new Date(this.date1) && new Date(o.date) <= new Date(this.date2)));

编辑
知道了 - 点（。）分隔符日期需要先转换为正确的日期（字符串）Taken from here

pattern = /(\d{2})\.(\d{2})\.(\d{4})/;

console.log(this.obj.filter(o => new Date(o.date.replace(this.pattern,'$3-$2-$1')) >= new Date(this.date1) && new Date(o.date.replace(this.pattern,'$3-$2-$1')) <= new Date(this.date2)  ));