Allow six-datepicker to manage ranges

[franckdervaux]

What problem does this feature solve?

At least two BFI projects (Support & Notification Portal and FI-Home) need to manage date ranges. Currently, as the six-datepicker does not offer that functionality, one is relying on the Vuetify library, the other is 'patching together' two date pickers. This results in an inconsistent UX and UI.

What does the proposed API look like?

1. Add a date-range value to the type property If that value is set, the input box would show, and accept date ranges like: The display would still follow the date-formatproperty defining the format of the start and end dates.

As already agreed with Dimitris Papadopoulos, the workflow for defining a range is:

• first click selects the first date
• second click selects the 'second' date. That second date can actually be before the first date, in which case the component automatically re-orders them
• if the popup is not automatically closed (see close-on-select below), a third click would restart the workflow, ie would set the first date, and the user would need to click again to complete the range.

2. Add a date-time-range value to the type property This would show the TimePicker in addition to allow selecting a range. The workflow is:

• select a date, the time is automatically set to the current time
• select a time, or
• select another date
• select a time

3. close-on-select If the type is date-range close-on-select defaults to true. If the type is date-time-range close-on-select defaults to false.
4. Add a show-predefined-ranges boolean property, that defaults to false If true and if the type is date-range, a set of predefined ranges are displayed below the calendar grid:

This allows the user to easily select from commonly used ranges.

5. All other properties remain unchanged.
6. The date-format property defines how each part of a range is displayed and entered.
7. if the min or max properties are set, they constrain the choice of start and end date in case type is date-range or date-time-range.
8. if allowed-dates is set, they constrain the choice of start and end date in case type is date-range or date-time-range. But the emitted range is not impacted. That is, there can be 'forbidden' dates within the returned range. It is up to the user to calculate the exact set of allowed dates within the range.
9. add a six-datepicker-select-range event which is triggered when the user selects a range. This event carries a DateRange type which is defined as; type DateRange = { start?: Date; end?: Date };

I have an implementation that can be viewed at https://github.com/franckdervaux/six-webcomponents/tree/feature/date-range-picker.