Description

Range selector allows the user to set a customized range of dates with or without hours in a unified component<<show example - make sketch wireframe>>.

...

Usage & Behaviour

General guidelines

Structure

The input field is composed of a string indicating the range (start - end) and an icon button which opens the dropdown.The dropdown . Next to the field a label would be set.

...

The menu is composed of calendar months horizontally displayed. From left (start) to right (end). The direction might change according to RTL languages

Beneath each of the calendar months lays the time picker and a summary of selected dates. , a manual input field is displayed. The field also displays the selected dates from the calendar months

Content

Usually used with a label “Date range”.

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.

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

...