PWA

The Date & Time picker component in the GoodBarber Design system is a powerful tool that allows users to easily select a date and time on the web (on the PWA).

We've designed it to be fully responsive and accessible, so it works seamlessly on all devices and screen sizes. Whether you need to pick a date for an appointment, schedule a meeting, or set a deadline, our Date & Time picker has you covered.

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