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
– Prashant Pimpale, Commented Jan 24, 2020 at 13:00

Nagender Pratap Chauhan · Accepted Answer · 2020-01-24 13:18:01Z

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 · Accepted Answer · 2020-01-24 13:29:13Z

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, 2020 at 13:29

answered Jan 24, 2020 at 13:05

Sameer

5,2363 gold badges27 silver badges47 bronze badges

1 Comment

Cara Over a year ago

Thank you for your answer but I still get back an empty array.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related