Filtering by date range within a computed array?

Question

Within my app I'm trying to develop the ability to filter my returned array of offers if they fall within a set of dates set using a datepicker.

My datepicker emits the values to two properties within a range object - this is filters.range.startDate & filters.range.endDate. Each offer in my array has the properties, offer.dates.start & offer.dates.end.

I've added the below statement in my computed property which doesn't break the computed, just returns no results regardless of dates.

Does anyone have any advice?

EDIT- Added the entire computed property with the date range statement as the last condition.

    computed: {
    filteredOffers() {
     let filtered = this.offers.filter(offer => {
        return (offer.island === this.filters.islandFilter || this.filters.islandFilter === 'All') // Island 
           && (offer.starrating === this.filters.starRating || this.filters.starRating === 'All') // Star Rating 
          && (offer.board === this.filters.boardBasis || this.filters.boardBasis === 'All') // Board Basis
          && (offer.duration === this.filters.duration || this.filters.duration === 'All') // Duration 
          && (offer.price.from < this.filters.price) // Price
          && (this.filters.travelby === 'sea' && offer.travel.air === false || this.filters.travelby === 'All') // Sea or Air
      && (this.filters.range.startDate >= offer.dates.start && offer.dates.end <= this.filters.range.endDate) // DATE RANGE!!
          });

    if (this.sortby === 'ascending') {
      return filtered.sort((a, b) => {
        return a.price.from - b.price.from;
      })
    } else {
      return filtered.sort((a, b) => {
        return b.price.from - a.price.from;
      })
    }
  }
}

If I were you, I would use a method to calculate this. Could you show us more code? — Raphael Parreira
– Raphael Parreira, Commented Jan 24, 2019 at 15:19
Thanks Raphael - I've added my full computed code above which returns and filters my offers array. — Matt B
– Matt B, Commented Jan 24, 2019 at 15:29
Yes, the full array returns. Here is the two screenshots, one with the date range filter commented out which works. (imgur.com/a/o2UjN3f) — Matt B
– Matt B, Commented Jan 24, 2019 at 15:47
If I were you, I would transform my dates to timestamp in milisecond to compare. — Raphael Parreira
– Raphael Parreira, Commented Jan 24, 2019 at 16:26

Raphael Parreira · Accepted Answer · 2019-01-24 17:06:28Z

1

First, I would transform your date objects to timestamp in milliseconds, just avoid some format errors when you compare.

let date = new Date();
let timestamp = date.getTime();

After that, I guess your logic is not correct, because your end date on filter should be greater than your offer end date, and your start date on filter should be smaller than your offer start date.

this.filters.range.startDate <= offer.dates.start && this.filters.range.endDate >= offer.dates.end

answered Jan 24, 2019 at 17:06

Raphael Parreira

4684 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Filtering by date range within a computed array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related