Woocommerce-admin: Discovery: Custom Calendar Range Pickers

[timmyc]

Child Issue of #59

The Date Picker has two modes, one allows users to select from "preset" date ranges ( i.e. Today vs Yesterday ), but the designs also call for the ability to select a custom date range.

@LevinMedia noted in his initial design post that we should consider exploring the date range selector created by the fine folks at AirBnB - react-dates

Another pony in the race is date-picker from Calypso. This option currently only supports selection of a single date, not a range ( I think ) and it is using https://github.com/gpbl/react-day-picker behind the scenes.

Likewise, Gutenberg uses react-day-picker for the calendar to select a post publish date.

And of course there is the roll your own option. But that might be a tad bit crazy.

For this task, I would like to see the above two options vetted for our needs in the Date Picker, so specifically we should evaluate:

• Can the option support selection of a date range? If not, what is the estimated level of effort to include that.
• Does the option of good a11y? Can one navigate the calendars via keyboard?

At first glance it appears react-dates might be the best option for us, but the goal of this task is to verify that assumption, or see if trying to build on top of what is used thus far in Gutenberg ( react-day-picker ) could also suit our needs.

[justinshreve]

react-dates

• _Can the option support selection of a date range?_ Yes.
• _a11y?_ Has keyboard navigation, contains proper inputs and aria labels.

Calypso date-picker

• _Can the option support selection of a date range?_ No.
• _If not, what is the estimated level of effort to include that?_ We would have to fork the package into our own repo and then add support. We'd have to change any Calypso specific code and/or copy in more components (tooltip is one example), and then finally add support for a date-range.
• _a11y?_ Looks like there is some keyboard navigation for switching between months/years, doesn't seem as straight forward to use and I had trouble figuring out how to select a day keyboard only.

react-calendar

I also briefly looked at react-calendar (our very own Lighthouse team is working on a calendar based on it, for scheduling). See p9lV3a-by-p2. It looks like we can support multiple dates, but a11y doesn't seem better then what react-dates is providing.

---

My vote is react-dates. It can handle single days and date ranges, and it seems to have good a11y and keyboard navigation, all out of the box.

I'll go-ahead and un-assign myself for now that I did a little discovery. Maybe @ryelle can also take a look at these options too?

[timmyc]

Fantastic @justinshreve thanks for digging in and validating assumptions and discovering some more internal projects that are utilizing some of these modules.

[ryelle]

I looked at react-dates when it was first brought up, it looks great from an a11y perspective. There was this comment for gutenberg about it announcing the wrong thing, but I wasn't able to reproduce that -- it worked for me.

IMO react-dates is the most readily usable, and has a lot of settings props. The only downside I can see would be if we need to customize even more than it allows, but I don't think that'll be a problem.