Как создать фильтр дат-диапазонов с простой настройкой в ​​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 ', как вы можете видеть. Поэтому я создал функции для двух разных входов типа date.

<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) Этот код вставляет библиотеку datepicker в ваш angualar проект, поэтому добавьте этот код в файл app.module.

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

2) Этот код вставьте в ваш файл app.comp onet. html [HTML FILE].

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

3) Этот код вставьте в свое приложение Файл .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)));

РЕДАКТИРОВАТЬ
Получено - точка (. ) разделитель даты необходимо преобразовать сначала в правильную дату (строка) взято отсюда

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)  ));