How to create a date-range-filter with a simple setup in Angular 6?

Question

I have created a little StackBlitz-Project that represents my situation. I want to log all objects within a chosen date range. But when I filter my object I get a empty array as results. I wanted to ask you how to compare dates, because depending on which datepicker you have you get a different value from the datepicker. It also depends on in which format you store the date (in this case a string).

Could you help me with my simple example? https://stackblitz.com/edit/angular-hbqguu

EDIT: I created an array:

  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"    
  }]

and I am trying to filter the objects with a certain date of the format 'DD.MM.YY' as you can see. Therefore I created to functions for two different inputs of type 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>

Filter functions

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

My filter function returns an empty array []. I am not really sure how to compare dates, I guess it depends on all formats you have as mentioned above.

It would be better if you provide some sample data in the question itself as text and format that you are getting from datepicker — Prashant Pimpale, Jan 24 '20 at 13:00

score 1 · Answer 1 · answered Jan 24 '20 at 13:18

you can use date range filter from ngx-bootstrap and simply implement in your project.

1) This code insert datepicker liabrary in your angualar project so add this code in app.module file.

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

2) This code insert in your app.componet.html file [HTML FILE].

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

3) This code insert in your app.component.ts file [business logic]

    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'])
  }

Sameer · Answer 2 · 2020-01-24T13:29:13.197

0

The date input will return date value as 2020-01-25, you should convert both the date to proper date

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

EDIT
Got it - The dot(.) separator date need to convert first to proper date (string) 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)  ));

edited Jan 24 '20 at 13:29

answered Jan 24 '20 at 13:05

Sameer

4,758
3
20
41

Thank you for your answer but I still get back an empty array. – Cara Jan 24 '20 at 13:10

How to create a date-range-filter with a simple setup in Angular 6?

2 Answers2