React-dates: Week picker

[tleunen]

I have a use case of a date picker but instead of having to pick a single date, or a range of date, I'd need to pick an entire week.

The way I'm seeing this is hovering on a day of a week will highlight the entire week, and when clicking on any day of the week will select a range between the first and last day of the week.

With the current state, is is something possible? I checked the props and examples and it seems not but I'd like to be sure before starting working on it if you're interested in having it within react-dates.

[daltones]

I guess this is currently possible.

In a common use case for DayPicker, we use onDayMouseEnter and onDayMouseLeave to save the hovered day, then modifiers with hovered state to mark visually that day.

You just need a hovered function that returns true for _every_ day of the same week of that saved hovered day (not just the exactly same day of the common case).

You can use the same approach for onDayClick and modifiers with selection-span.

[pcatalina]

@tleunen did you finally arrive to pick a week by hovering over a date with react-dates ?

[tleunen]

To be honest, I haven't taken the time to investigate and make it work. But as @daltones said, I believe it's possible without too much work.

[derwaldgeist]

I need the same for selecting whole months and whole years. It would be perfect if the widget could be configured in a way that it selects either days, weeks, months, years or user-defined time-spans.

[majapw]

It's def trivial to use the datepicker to click on a day and then select the week. It's a bit more challenging to hover the whole week when hovering over a single day.

You could also, as @daltones said, roll your own custom DayPicker config to make it work.

a DayPickerWeekController might be an interesting component that we'd probably considering rolling into the library.

[derwaldgeist]

Well, it’s not that trivial if you consider that there are different calendar types and different first days of a week. And yes, hovering should work, too, to give the user a consistent feedback. This is especially important if the widget auto-closes after selection.

What makes it even more complex is the fact that you have to consider the selection if the user switches to months that were not visible before and the selection crosses the month border. As pointed out in another issue, the trivial approach fails here.

[jakeclements]

I've had a requirement for this functionality as well, I've had a chance to take a look at it and have submitted a PR.
Feedback & change requests are welcome

[tleunen]

I see the PR has landed, so I'm closing the issue. Thanks again @jakeclements for your work. It will be very helpful!

[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