Date & Time Picker

UI Components

This tool is used to select a date and time on your app. It’s generally used to pick the date for an appointment, schedule a meeting or set a deadline.

iOS Component

The Date & Time picker component in the GoodBarber Design system for iOS devices follows the Human Interface Guidelines of iOS to ensure a familiar and consistent feel for your users. It is designed to be simple and elegant, providing users with a smooth and seamless experience for selecting a date and time.

Apple Pickers guidelines

https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/#date-pickers

Pickers — Compact

iOS Time picker - Compact

iOS Time picker - Compact

Pickers — Inline

iOS Date picker - Inline

iOS Date picker - Inline

Pickers — Wheels

iOS Time picker - Wheels

iOS Time picker - Wheels

https://developer.apple.com/documentation/uikit/uidatepicker

Android Component

Material Design > Guidelines > Date / Year Pickers

https://material.io/archive/guidelines/components/pickers.html#pickers-date-pickers
Android Date & Year picker

Android Date & Year picker

https://material.io/archive/guidelines/components/pickers.html#pickers-time-pickers
Android Time picker

Android Time picker

Material Design > Components > Date / Year Pickers

https://material.io/components/date-pickers#mobile-pickers

https://material.io/components/date-pickers#desktop-pickers

Material Design > Components > Time Pickers

https://material.io/components/time-pickers

Developer > Android > Guide > Controls pickers

https://developer.android.com/guide/topics/ui/controls/pickers

PWA Component

Anatomy

The structure of the pickers are the same on all devices, only the font size changes.

Features:

  1. Opens the year picker
  2. Switching from one month to the next
  3. Highlighting of today's date

PWA Date picker

PWA Date picker

Calendar structure

These structures are used for all devices. The green areas represent dynamic areas, where the length of the word can vary.

Please refer to the component inspector at the bottom of the page to examine the component in detail.

Text blocks, icons and buttons

The illustration below shows the size of the elements and their spacing.

Structure of PWA calendar

Structure of PWA calendar

Highlighting of dates

Size of highlights and placement.

Size of highlights in PWA calendar

Size of highlights in PWA calendar

Year picker structure

The green areas represent dynamic areas, where the length of the word can vary.
PWA Year picker

PWA Year picker

Time picker structure

The green areas represent dynamic areas, where the length of the word can vary.

PWA Time picker

PWA Time picker

Font Size

The font size changes according to the devices, but not according to the user's choice.

Sizes are : DH1 Small / H1 Small / B1 Small. In the examples below, the font used is Roboto. The size for the hours is the same as the one used here for the years.

Text levelDeviceSizeFont sizeWeb
Display Heading 1MobileSmall31DH1MS
TabletSmall34DH1TS
WebSmall36DH1WS
Heading 1MobileSmall22H1MS
TabletSmall24H1TS
WebSmall26H1WS
Body 1MobileSmall14B1MS
TabletSmall16B1TS
WebSmall16B1WS

Mobile

Mobile font size of the calendar

Mobile font size of the calendar

Tablet

Tablet font size of the calendar

Tablet font size of the calendar

Web

Desktop font size of the calendar

Desktop font size of the calendar

Properties

Shape

The Shape atom applied to pickers with the types Sharp / Rounded / Round:

Shape on PWA date picker

Shape on PWA date picker

Border

If the Border Atom is applied, its value changes depending on the state of the component. The calendar becomes active as soon as you click on it:

Inactive StateFocus State

Border on PWA date picker

Border on PWA date picker

Shadow

Mobile

The Calendar component is displayed as a Modal on Mobiles, it then inherits by default the Shadow atom, type Level 4.
Shadow on mobile date picker

Shadow on mobile date picker

Tablet & Web

Below are two examples of combinations of shadow levels to accentuate the elevation effect more or less.

Shadow on Tablet & Desktop date picker

Shadow on Tablet & Desktop date picker