Allow Both Single and Range Selection about react-daterange-picker

[jkimbo]

That is correct @stingrayfunk you can only have one mode of the time. We are open to other approaches, though I am curious as to how you see a mixed mode version working? When a user selects a date, in range mode we then wait for them to select another date. In single mode one date is enough. How would a mixed version know when the date selection is complete?

[stingrayfunk]

Thanks for the quick reply! I imagine it working like this:

The calendar would behave like it currently does for single mode. Then after the first date is clicked, the light outlines appear as they do in range mode. If they click a 2nd date, this range is selected, like in range mode. If they don't click a 2nd date, they still have their single selection. It's basically the existing range functionality, but allowing one date to be enough.

Make sense?

[jkimbo]

Ok I guess that makes sense but I'm not sure we want to add more logic to what is already quite complicated. Maybe a good compromise is to add some more callbacks that get fired when the first date is selected and the second etc and then you can define what the logic is outside the component?

One caveat is that in range mode, when you've selected a date and it's waiting for the next date, hovering over the pagination arrows causes the view to move to the next month. This is expected behaviour but may interfere with the single selection paradigm.

[stingrayfunk]

If we take the compromise of callbacks, the problem is usability. In range mode, when a date is selected, the user moves the mouse and sees that a 2nd date is expected (first date doesn't look fully selected). They don't have a visual cue that they've completed a date selection, unless the callback manually updates the colour of the date cell, but that seems like a hack.

No problem if my suggestion complicates the existing implementation in its current form. I haven't looked at the code yet so I couldn't comment on that.

[RohithVishwanath]

Could we allow a double on the same date? I would love if it allows this and return the same date for "start date" and "end date"..
Also as range pattern, we click a "start date" and "end date". It would be intuitive I feel. What do you guys think about this?

[stingrayfunk]

Thanks, yes, agreed. Surely it just needs to return either one date (implies single selection), or two dates (implies range selection). Look at the way Kayak does it: http://www.kayak.co.uk/flights. For return flights, range selection, for one way flights, single selection. This is what I'm proposing for react-daterange-picker, only in one mode. There's no need to distinguish between single and range selection in terms of instantiating the React component. Unless I'm missing something? You could force each specific mode if you need to, but I think dual mode should be available too.

[jkimbo]

@stingrayfunk @RohithVishwanath interesting idea that we hadn't thought of before. @AndrewIngram is going to be doing a lot of work on the datepicker this coming week, building on feedback we got from usertesting so we'll add this to the mix as well. Stay tuned!

[AndrewIngram]

I'm not sure I understand the Kayak example. The way Kayak seems to work is the same as what's already possible, because you select single vs return before date selection.

Ultimately it's a UI issue, with a sprinkling of being a data issue. On the data side, I generally think of datepickers as being ridiculously elaborate enhancements of regular form inputs, which to me means there's an inherent contract as to what data type (in this case date, or date range) should be returned. Obviously we don't need to be quite so draconian, we can let you use the picker however you like, so I'm mostly going to treat this as a UI problem.

For context, i'd like to highlight that from our experiences with user testing, making a usable range picker is actually quite hard. There's a surprising number of use cases to cover, and if you look around at the various websites that use them (usually travel or analytics companies), there's a real lack of consistency. When you throw in our requirement to be able to block out ranges of dates as being un-selectable, it's even nastier.

So for this particular issue of allowing selection of a single date in range mode...

What does a user do to select a single date? I'm assuming they either select the same date twice, or somehow bail out after the first date is selected. The second one is already possible to do now that we have an event firing after the first date is selected. I don't know if we'd implement it in the component itself because the bail out process seems to be down to how you've chosen to use the picker (eg there's a difference between having it in a popover, to having it inline in the page).

The first one (selecting the same date twice) would work on a technical level, but has issues with affordance. How do you make it obvious that it's possible without flooding the UI with instructions on how to use it? From our own testing, we've realised that when it comes to implementing a custom UI widget, you can't assume anything will be obvious.

In the short term, we can just look into making it possible to select a range with length 0, ie start and end are the same, then it'll be up to you to decide what that actually means .

[RohithVishwanath]

I agree with @AndrewIngram and giving the same date for start and end makes sense. The using component can figure it out what it mean.