Versions Compared

Version Old Version 60 New Version Current
Changes made by

Hasitha Jayarathne

Hasitha Jayarathne

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

Description

...

Date input field

State

Visual

Regular

Image RemovedRegular.pngImage Added

Hover

Image RemovedHover.pngImage Added

Active

Image RemovedSplit Buttons Regular-Active.pngImage Added

Disabled

Image RemovedDisabled.pngImage Added

Read-Only

Date Picker.pngImage RemovedRead-Only.pngImage Added

Error

Image RemovedError.pngImage Added

Warning

Image RemovedWarning.pngImage Added

Focused

Image RemovedFocused.pngImage Added

Focused, Hover

Image RemovedFocused, Hover.pngImage Added

Focused, Active

Image RemovedFocused, Active.pngImage Added

Focused, Disabled

Image RemovedFocused, Disabled.pngImage Added

Calendar

  • The current day and the selected date are highlighted.

  • The calendar may contain dates which the user cannot select. Those dates should be disabled.

  • Days from the previous or next month, seen in the first or last weeks, should be greyed out (with the cursor still shown as a hand).

...

  • Clicking on the calendar Icon Button or any blank space will open the date picker menu.

  • The date picker menu will be closed:

    • when a date is selected, or

    • by clicking outside the date picker menu.

Validation and Errors

Please refer to Field Validation page for more information.

A date field with a warning will have an orange border and a warning icon, as displayed below:

...

A date field with an error will have a red border and an error icon, as displayed below:

...

Transitions

  • A slide down transition is used when the menu opens.

  • A swipe transition is used when pressing the left and right arrows to navigate between the months.

...

Keyboard

Date picker field

Date picker menu

Image RemovedFocused.pngImage AddedImage RemovedSplit Buttons Regular-Active.pngImage Added

Tab

  • Navigates the input section from left to right.

  • When on the last input section, the highlight will move to the next component.

Cycles through the different elements in the following order:

  • Left arrow.

  • Month menu.

  • Year menu.

  • Right arrow.

  • The focused day on the calendar. (By default, this is the current day).

Shift + Tab

  • Navigates the input section from right to left.

  • When on the first input section, the highlight will move to the previous component.

Reverses the order of navigation described for Tab.

Space

  • Opens the date picker menu.

  • Removes the section highlight.

  • When a day is highlighted - Sets the currently-selected date and closes the menu.

  • On month/year - Opens the menu.

  • On right/left arrows - Navigates between months accordingly.

Enter

Applies the date.

Sets the currently-selected date and closes the menu.

Esc

N/A

Closes the menu and returns the focus to the field, without applying any changes.

Arrows

  • Up - Increases the value of the highlighted input section.

  • Down - Decreases the value of the highlighted input section.

  • Right/Left - Moves the input highlight accordingly.

  • When a day is highlighted - All arrow keys (up, down, left, right) navigate between the days accordingly.

  • On the last day of the month - Right arrow key will navigate to the first day of the next month.

  • On the first day of the month - Left arrow key will navigate to the last day of the previous month.

  • On month/year - Down arrow key will open the menu.

...

Zeplin Link

Thumbnail

https://zpl.io/aNXBPk2

Image RemovedDate Picker States.pngImage Added

Code

...