a-coruble
a-coruble

Reputation: 411

React-dates select multiple weeks range

I'm currently using react-dates to have a DateRangePicker and I would like the user to be able to select multiple weeks at once. I've seen this way to select 7 days at once which is the start of what I want.

I'd like the first click to select the start of the selected week and then be able to highlight and select another week. When the user clicks on this second week, I'd like to set the end date to be the end date of the selected second week.

I'm not limited to react-dates, if it's possible / easier with another package, I can use it !!

I hope I was clear enough, do not hesitate to ask for clarification.

Thanks in advance.

Upvotes: 0

Views: 3006

Answers (1)

Yussuf
Yussuf

Reputation: 302

using the DateRangePicker component from react-dates, you need these props:

<DateRangePicker
...
startDateOffset={day => day.subtract(3, 'days')}
endDateOffset={day => day.add(3, 'days')} />

Example: https://stackblitz.com/edit/react-lyd5qh

You can use the logic in endDateOffset to point to a method to calculate how many days are left for the end of the week and set it accordingly

Upvotes: 2

Related Questions