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 and time picker allows the user to select one or several dates, and to choose an hour.

Date picker

Use the date picker when entering a date.

The date picker has three variants:

  • “Simple date”, a text field without icon allowing the user to enter a date using the keyboard.
  • “Calendar”, a text field with an icon that opens a calendar to allow the user to select a date.
  • “Range”, two text fields with icons allowing the user to enter a period of time.

The user can navigate through the months by using the buttons on either side.

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

 

 

You can see all different state of date picker: simple date picker, opened date picker and range date picker.
Hour picker

The hour picker allows you to enter an exact time.

Two options:

  • Simply use a text field with “hh : mm” as placeholder
  • If needed, you can add a Select next to the time text field allowing the user to choose from “AM” to “PM”.
You can see a hour date picker.
Best practices
Good practice of the use of an icon on the date picker component

Always show the calendar icon in the text field to make it clear to the user entering a date.

Bad practice about the use of an icon in a date picker component.

Don’t hide the icon because it won’t be clear for the user he needs to enter a date.

Good practice about the use of  datepicker.

The calendar must open on the current month and date, which must be highlighted.

Bad practice about the use of  datepicker.

Don’t open to a random date.

Caution practice about the use of  date time picker.

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).

Caution practice about the use of  date time picker.

Make sure the user can actually select the selectable dates.

Good practice about the use of  date time picker.

Always allow manual entry of the date or the period of time.

Bad practice about the use of  date time picker.

Don’t take off the manual entry.

Visual guidelines

Behaviours

The elements of the date picker are available in 4 states: Default, hover, selected, current day, focus, out of month.

Datepicker02
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top