Lead:  Asaf Ben-Oved  

...

General guidelines

Structure

The direction might change according to RTL languages.

Component	Image

Range picker field (Dates only)

Image Removed

Range picker menu (Dates only)

Image Removed

Comments
Range picker field

(Dates and Time)Image Removed

Range picker menu (Dates and Time)

Image Removed

Added presets Range picker

phase 1 see examples in Sketch

...

Image Added

A string indicating the range (

...

...

...

Image Added

...

...

Beneath each of the calendar months, a manual input field is displayed.

Content

• Usually used with a label “Date range”.

• The bottom top manual field also displays the selected dates from the top calendar monthsaligned 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.

• Manual input

  • When a user selects a month both the Range picker and manual fields updates automatically

  • When a user enters a manual date both the Calendaric Calendric month and range picker field

    Image RemovedImage Added

Interaction

• The external field date fields can only be clicked upon, no manual entry of datesSelection is always be manually typed with no need to use the menu

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

Opening the menu (Happy user flow)

Clicking anywhere in the external field will open the menu

...

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

...

Clicking on the From Field or Icon

...

• By default, the From Field is highlighted

  This field only allows manual input by keyboard

  and text selected

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

• Clicking outside the menu is equivalent to the Cancel operation

Selecting a From date

...

• Clicking anywhere Any selection on either of the displayed calendar months will select that date as From and update the From Input Field at the bottom and the External field ( should the External field be updated immediately )menu will be considered as the From date

• From field will be updated immediately

• The focus will move to the To Field All dates prior to the From date are disabledand reset it

• 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 range

• In 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)

• Clicking outside the menu is equivalent to the Cancel operation

Selecting the To date

...

(Happy user flow end)

...

• Clicking on the To date will

  • Show range selection as selected

  • Update the To input field at the bottom

  • Enable all previously disabled dates (prior to 17 in the example)

  • Move the Focus back to the From input fieldRemoves 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 operation

Using the Time picker

Adding the times to the dates follows the same flow as the date picker.

...

Validations and errors

• Validation indication is presented immediately after the user makes the selection on the calendaric 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

  • Selecting a From date which is later than the To date

  • Selecting a To date which is earlier than the From date

Example of range picker (date and time):

...

Transitions

...

Examples:

Image Added	Error on the entire range picker
Image Added	Error on a specific field in range picker

Transitions

• A transition from Date icon to “v” icon

• The menu should slide up-down (the same as Date picker)

Best practices

• Use Range /Time picker over 2 Date picker whenever a user needs to select a period

• If start-end times are also required, use the time picker
  for example:

  Image Added

Future Version (TBD)

• Adding a time picker within the menu so it will hold both dates and times at a unified component

• Add a reset button to clear all fields

Accessibility compliance

<<In <<, In general, each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

...