Lead:  Asaf Ben-Oved  

...

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

  Image RemovedImage Added

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

• Clicking either the From/To fields or the Date icon, opens the menu with the relevant selection

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

...

• By default, the From Field is highlighted and text selected

• Clicking outside the menu is equivalent to the Cancel operation

2. Selecting the From date

...

• The selected date is indicated

• The focus moves to the To field

• Clicking outside the menu is equivalent to the Cancel operation

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

  Image RemovedImage Added

3. Selecting The To date

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

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

...

Additional cases

• Clicking on either a populated From to or To field will highlight the fields, select the dates and will open the menu and highlight the selected date
  

  Image RemovedImage Added
  On

  • If the

  range picker field

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

  • If the user selects To field is selected - The next selection will update the To field and close the closes the menu

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

    Image RemovedImage 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

  ...

  • 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

  ...

  	Error on the entire range picker
  	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)

  • Focus move between the From and To should be animated and smooth

  <TBD animations>

  Best practices

  • Use Range picker over 2 Date picker whenever a user needs is required to select set a custom period

  • Don’t use range picker when a default set of ranges can be pre-defined to satisfy the user. a Selector - Segmented button can be a better approach for offering different periods.

  • If start-end times are also required, use the time picker component in adjacent with the range picker
    for example:

    

  Future Version (TBD)

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

  • Add Consider a reset button to clear all fields

  ...

  Zeplin link	Screen thumbnail
  <<Short Zeplin link. You Use thisthis>>