Lead:  Asaf Ben-Oved  

...

Range Picker allows the user to set a customized range of dates with or without hours in a unified component.

...

Usage & Behaviour

...

Component	Image	Comments
Range picker field		A string indicating the range (From - To) and an icon. Next to the field, a label would be set.
Range picker menu	Image RemovedImage Added	2 calendric months horizontally displayed. From left (start) to right (end).

• The top manual field displays the selected dates aligned with the calendric month

  • If the range spend more than 2 months, the display of the calendric months will be set according to the selected field (From or To)

Internal Logic

...

The months are always coupled which means the user always sees 2 consecutive months.
For example, if the user chooses to see the Januar 2020 on the End month (right side), the left side will show December 2019.

Internal Logic

• The months displayed in the menu can be changed independently

  • The user cannot select a To date which is earlier than the From date or a To date which is later than the From date.

• The top manual field displays the selected dates is aligned with the calendric month

  • If the range spend more than 2 months, the display of the calendric months will be set according to the selected field (From or To)

  Image Removed

...

• When 2 consecutive months are displayed together on the menu, the arrows are disabled accordingly.
  See example:

  Image Added

• The date fields can be manually typed with no need to use the menu

• Selection flow is From (start) date -> To (end) date unless some exceptions (see below)

...

• the menu

...

• Clicking either the From/To fields or the Date icon opens the menu

...

Clicking on the From Field or Icon

...

• with the relevant selection

  • Clicking the Icon is equivalent to clicking on the Form date

...

Interaction

Happy flow

clicking on the From field

...

The menu opens

...

• By default, the From Field is highlighted and text selectedAny selection on the menu will be considered as the From date

• Clicking outside the menu is equivalent to the Cancel operation

Selecting

...

the From date

...

Any selection on the menu will be considered as the From date

...

• The selected date is indicated

• The focus will move moves to the To Field and reset itfield

• Clicking outside the menu is equivalent to the Cancel operation

Hovering for the To Date

...

• A “trail” of hovered dates will be presented as the user hovers to select the To date only If the hovered date is later than the currently selected date (or rangeIn case the user selects prior dates to the 1st date of the range the From field will update but focus will remain on the To field (the user didn’t complete selecting the To date yet))

  Image Added

Selecting The To date

• Assuming user clicked on a date which is the same or later than the selected From date) the menu will be closed and dates updated

• Clicking outside the menu (without selecting any date) is equivalent to the Cancel operation

Selecting the To date (Happy user flow end)

...

Special Conditions

• Clicking on the To date will

  • Show range selection as selected

  • Update the To input field at the bottom

  • Removes all focus from the fields

  • Changes the Date icon to a “v” icon

    • Clicking on the V is equivalent to clicking outside the menu

  Clicking outside the menu is equivalent to the Apply operationeither a populated From to To field will open the menu and highlight the selected date
  

  Image Added

• On the range picker field

  • In case the user selects From - The next selection will update the From date and move focus to the To field

  • In case the user selects To - The next selection will update the To field and close the menu

• whenever a user selects a date which is earlier than the currently selected From date, only the From date will update withouht changing focus in the range picker fields
  

  Image Added

• A “trail” of hovered dates will be presented as the user hovers to select the To date only If the hovered date is later than the currently selected date (or range

Validations and errors

• Validation indication is presented immediately after the user makes the selection on the calendric month

• If the user entered an invalid date/syntax in the manual field and tries to close the menu, use the behavior of connected cells in Field Validation

• Displayed error upon Manually entering

  • From date which is later than the To date

  • To date which is earlier than the From date

...