Currently, I am incorporating ngx-bootstrap's datepicker functionality and utilizing the date range picker. This feature allows users to choose a start and end date.
After selecting these dates, my goal is to filter the array(content) based on whether the date falls within the selected start and end dates.
Through console logging, I have successfully retrieved the desired output for startDate and endDate. Now, I need to pass these values to my *ngFor loop as shown below for the date range pipe.
<my-timeline-entry *ngFor="let entry of timeLine | filter:filteredLocation:'location' | dateRangeFilter: startDate: endDate">
These values are then utilized by the date range pipe to return the filtered results.
I've been experimenting with this for some time now and have created a simplified version on StackBlitz without all my previous attempts. The issue I keep encountering is that the date format doesn't match the one in the array. Although I did manage to solve it at one point, it affected 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]">
Directly passing the values to the pipe - just need assistance configuring the pipe now.
Any support regarding this matter would be greatly appreciated!