[date-picker] Range select

[jouni]

Range selection has currently been designed to work within one date picker.

We should evaluate different scenarios if they are better served with to individual pickers instead, or if we can and need to improve the single picker design in some way to accommodate more scenarios.

It’s not 100% clear to me how this relates to multi-select also, when the user can select many individual days from the picker, so it could be considered here as well.

[jouni]

For reference: http://www.skyscanner.fi/

[tuomasnironen]

https://www.google.com/flights/ https://www.airbnb.com/ http://www.momondo.fi/ https://fi.hotels.com/ https://github.com/motss/jv-datepicker http://codepen.io/davidkpiano/details/xwyVXO

[tuomasnironen]

Date Picker Scenarios: Range Select & Multi Select

[tuomasnironen]

Please review and comment the scenarios documented so far.

Also I would like to hear your thoughts about:

• Should the scenarios 14-17 be elaborated and further explored?
• Should there be a calendar icon on the left of the inputs as additional click targets to open date picker? Like so: https://material.angularjs.org/latest/demo/datepicker

[jouni]

Scenarios 14-17: I would concentrate on the other scenarios first, nailing those before elaborating the last ones.

Calendar icon: I feel like that could be left for the developer to add manually, and wire it up to focus and open the date picker.

[tuomasnironen]

Updated the document:

• replaced the tooltips to "dd/mm/yyyy"-placeholder texts
• removed wordings describing visual styles in too much detail

@jounik Please review and notify if ok for "Done".

[tuomasnironen]

Revised the scenarios/wireframes document:

• When the dropdown is closed, the range input is visually one continuous dropdown.
  • Begin/end fields still act as separate inputs allowing the user to set the focus where he wants when the dropdown opens
  • Begin/end inputs now have their own ✕'s to clear the relevant value
• Replaced the ✔︎ buffered selection with OK/Cancel links at the bottom
• OK/Cancel enables basically the open-ended begins from/ends to -type of selections
• Desktop: grouped the year browse link ("< 2016") with "Today" link at the bottom

[jouni]

Added a couple of comments.

I’m still not comfortable about the very different layout for desktop (two months side-by-side). Also, the unbuffered mode is starting to feel the one we should initially drop, and concentrate on using the buffered mode for both single date and range selections.

That said, I think we can move this one back to the backlog to rest for a while, and get back to it once the development is at the point when we can consider implementing range selection.

[samiheikki]

Just a comment: This can easily be achieved by two date-pickers after the min and max attributes were added.

<template is="dom-bind">
  <vaadin-date-picker label="Start" value="{{startValue}}" max="{{endValue}}"></vaadin-date-picker>
  <vaadin-date-picker label="End" value="{{endValue}}" min="{{startValue}}"></vaadin-date-picker>
</template>

[jouni]

Seems like a nice workaround until we have it as an integrated feature 👍

[jouni]

@vaadin-marcus, you could use this workaround in Expense Manager ;)

[jonadeline]

FYI, a new polymer component with range option has been released recently : https://github.com/RoXuS/range-datepicker/

[abdonrd]

Any news about this? 😃

[tomivirkki]

Hi @abdonrd, no progress on this yet unfortunately. It's quite a requested feature so deserves a revisit.

[heruan]

It would be also very interesting to see also how vaadin-date-picker and vaadin-time-picker could integrate for a date-time range selection.

Currently it can be done using four components (two date pickers and two time pickers), but it would be much easier for the user to have a two (or even a single) component/overlay.

For example (from http://www.daterangepicker.com):