React-dates: Pick full week in DateRangePicker

[mollynordh]

I would like to be able to use the "with current week range selection" from the DayRangePicker in the DateRangePicker. Is there anyway I could do that? Or if someone could point me to a way to get the DayRangePicker to work with week selects since I'm struggling quite bad with it.

Much appreciated,
Molly

[majapw]

Hi @mollynordh, I think that when @jakeclements implemented week selection, they intentionally did not add the same behavior to the DateRangePicker. You can see more context here - https://github.com/airbnb/react-dates/pull/884#issuecomment-349822942.

Specifically:

While it's completely possible the functionality of it may be confusing. As far as I'm aware, the standard for the DateRangePicker is always to select the start and end date seperately (please correct me if I'm wrong here).

Can you talk a little bit more about your usecase?

[mollynordh]

Hi again! Sorry for the late response.
We're building a b2b portal where we are presenting visitor data in graphs in different time periods (day, week and year) and we want the user to be able to select a fixed week to get the data for that specific week. We'd want the whole week to appear to be selected when the user hovers the week. When the user has clicked the preferred week we fetch data from our API with the first and last date from that week and it returns data for the whole range and populates the graphs.

Hope that's clear,
Molly

[mbaev]

It might be a useful feature, I need this too.

[jakeclements]

@mollynordh, @mbaev, I'd like to leave the decision of adding this into the DateRangePicker to the good folks at Airbnb as it does introduce some considerations around current functionalities.

Having said that, I've added an initial implementation for review in the PR above.
A couple of notes;

• I've required all dates within offset to be within dateRange before allowing the user to select their dates.
• I haven't handled the active startDate/endDate for the inputs, I trialled highlighting both dates when using offsets but this is confusing with input focus. This may require further thinking for how we would handle active startDate/endDate focus.

[jessgolding]

We're also very interested in this request. We’re building out some functionality that uses your date picker but are missing the ability to force selection of a full week at a time. Imagine our joy when we came across #1252.

Super keen to have that PR merged if you want to feed back the interest to the team. You may notice my thumbs up :-)

Happy Friday all

[sht5]

I managed to do this by overriding the renderCalendarDay method. i give it the relevant classes and add a hover action to keep a state of selected week which i highlight in the same method.
woohoooo!
https://codesandbox.io/s/5nk78l76x

[RemyMachado]

Isn't this component fulfilling the need ?
http://airbnb.io/react-dates/?path=/story/daypickerrangecontroller--with-current-week-range-selection