Angulars ngx-bootstrap date range output to date range filter pipe

Question

https://stackblitz.com/edit/timeline-angular-7-uj3jtl

I'm building functionality with ngx-bootstraps datepicker, using the date range picker. It allows users to select a start and end date.

With these dates after they have been selected I want the array(content) to filter if the date falls withing the select start and end dates.

I've managed to get the desired output via console log for startDate and endDate. I need to now send these values to my *ngFor loop as below for the date range pipe.

<my-timeline-entry *ngFor="let entry of timeLine | filter:filteredLocation:'location' | dateRangeFilter: startDate: endDate">

These then get fed into the date range pipe and returns the filtered results.

I've been playing around with this for a while, I have created a StackBlitz minus all my attempts. The issue I have been getting is with the date coming out not matching the date format in the array. I did solve this at one point but with detriment to passing the updated startDate and endDate to the *ngFor loop.

    dateFilterChanged(bsRangeValue: string) {
    console.log('filterValue', bsRangeValue);
    const startDate = new Date(bsRangeValue[0]);
    const endDate = new Date(bsRangeValue[1]);
       console.log(this.datePipe.transform(startDate,"dd-MM-yyyy"));
     console.log(this.datePipe.transform(endDate,"dd-MM-yyyy"));
  }

Update

<my-timeline-entry *ngFor="let entry of timeLine | filter:filteredLocation:'location' | dateRangeFilter: bsRangeValue[0]: bsRangeValue[1]">

Pass the values straight to the pipe - just need help to configure the pipe now.

Any help on this would be amazing!

Answer 1

Ok, I hope this helps somebody else. Finally got it working. Please take a look at original StackBlitz.

All that was missing was to reference the object property correct in my range filter pipe.

        let a = value.filter(
          m => new Date(m.dateTime) >= startDate && new Date(m.dateTime) <= endDate
        )