Date Picker

A control for selecting a date.

Behaviours & State

Behaviour

When closed, the first title line should prompt the user as to the function of the picker. The second line of text shows the currently selected value.

 

When open, all content below the picker is pushed further down to make room for the entire height of the control in its open state.

 

After making selections, pressing enter/ok on the picker title will close the control; once closed, the selected value(s) appear beneath the title.

States

  • Closed
  • Focus (hover)
  • Open

Sizing

The width of the Expandable Control will automatically scale to fit the area containing the control.

Illustration

DATE_PICKER.png

Navigation