Skip to main content

Date and Time

A date and time picker allows the user to select an associated date and time.

Variants​

There are a total of 5 variations of date and time to choose from in GEL.

Date and time types

Demo​

Date and time demo

Guidance​

  • The selected time and date should be reflected in the input box for both date and time picker components.
  • The time and calendar are displayed as dropdown upon clicking the icon in the selection area. User can type if they click in the input area instead of the icon.
  • The placeholder indicates the behaviour in which the selected value will be displayed to the user.
  • The icon in the date and time picker differentiates it from a regular text input even though the functionality are similar.
  • Similar to the listbox, the calendar and timer should be display left aligned to the date or time picker with a margin of Spacer-1(4px) between them.
  • Increase the width of the input field when a date range has been selected.

When to use​

  • Use the date and time picker if the user wants to populate the given input field with either Date or Time.

Designer assets​

figma
Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API​

vue
Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP
Last updated on