In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Date/time picker

The Date Picker is used to select one or several dates, the hour picker is used to choose an hour.

Usage

Date picker

Use the Date Picker to enter a date.

Use the Date Ranger Picker to enter a period of time.

Date Picker   Variations

Best practices

  • Always show the calendar icon in the Text Field to make it clear to the user they are entering a date.
  • Use the Date Picker to enter a date in the near future (from a few days to a few years).
  • Opt for a numeric Text Field to enter a distant date 
  • Always allow manual entry of the date or the period of time
  • The calendar must open on the current month and date, and it should be highlighted
  • Simply choosing a value confirms the choice. You do not need an action button to confirm the entered text
  • In cases when the requested date must be later than the current date, you must grey over and make the previous days unclickable (the same goes for opposite situations when the requested date must be prior to the current date).

 

Placement

The Date Picker is mainly used in forms or in filtering sections.

Hour picker

The Hour Picker allows you to enter an exact time.

 

Best practices 

  • Always show the clock icon in the Text Field to indicate to users that they are entering a time.
  • Use the Hour Picker to enter a specific time. 
  • Always permit users to enter hours and minutes manually.
  • The Hour Picker should open to the current time.

 

Placement

The Date Picker is mainly used in forms or in filtering sections.

Time_Picker
Visual

Date picker

Appearance

The Date Picker includes a Text Field with an icon that permits opening a calendar to select a date. The user can navigate through the months by using the buttons on either side.

Make sure to use the right visual style for the right information (see below).

Date Picker   Info Visual Style

Behavior

The elements of the Date Picker are available in many states: normal, hover, focus, disable.

Date Picker   States

Hour picker

Appearance

Hour Pickers are always shown in an expand with two incrementers for the hours and minutes, as well as two buttons: Cancel and OK.

 

Behavior

Hour Pickers appear within the corresponding placeholder when it is clicked. 

 

Back to top