--- title: "Date & Time Picker | GoodBarber's Design System" description: "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." canonical_url: "https://www.goodbarber.com/uxdesign/date-time-picker/" lang: nl --- # Date & Time Picker | GoodBarber's Design System [Design System](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://nl.goodbarber.com/uxdesign/](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://nl.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) # 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. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/datetimepicker.573355dcf04a.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/datetimepicker.573355dcf04a.mp4) ## 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 "https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/#date-pickers") ![](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-iOS-Link-Apple-Logo.28720e237c58.png) Pickers — Compact ![iOS Time picker - Compact](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-iOS-Pickers-Compact.9252635fa13d.png) *iOS Time picker - Compact* Pickers — Inline ![iOS Date picker - Inline](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-iOS-Pickers-Inline.4308b3ca4df9.png) *iOS Date picker - Inline* Pickers — Wheels ![iOS Time picker - Wheels](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-iOS-Pickers-Wheels.232ed8ef6ed1.png) *iOS Time picker - Wheels* ## Android Component Material Design > **Guidelines** > Date / Year Pickers ![Android Date & Year picker](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-Android-Guidelines-Date-Year-Pickers.2b22704d959a.png) *Android Date & Year picker* ![Android Time picker](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-Android-Guidelines-Time-Picker.877999a3cab7.png) *Android Time picker* Material Design > **Components** > Date / Year Pickers Material Design > **Components** > Time Pickers Developer > Android > Guide > 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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-PWA-Anatomy-Calendar.47d0a6c0fde0.png) *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](#inspection) 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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-PWA-Anatomy-Calendar-Structure-Texts.627aa6fa1c1f.png) *Structure of PWA calendar* **Highlighting of dates** Size of highlights and placement. ![Size of highlights in PWA calendar](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-PWA-Anatomy-Calendar-Structure-Highlights.3808c9e4c277.png) *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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-PWA-Anatomy-YearPicker-Structure.4752dac95762.png) *PWA Year picker* ### Time picker structure The green areas represent dynamic areas, where the length of the word can vary. ![PWA Time picker](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-PWA-Anatomy-TimePicker-Structure.8d3188d79aa0.png) *PWA Time picker* ### Font Size The [font size](/uxdesign/atom-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 level** | | **Device** | | **Size** | | **Font size** | | **Web** | | | --- | ----------------- | --- | ---------- | --- | -------- | --- | ------------- | --- | ------- | --- | | | Display Heading 1 | | Mobile | | Small | | 31 | | `DH1MS` | | | | | | Tablet | | Small | | 34 | | `DH1TS` | | | | | | Web | | Small | | 36 | | `DH1WS` | | | | Heading 1 | | Mobile | | Small | | 22 | | `H1MS` | | | | | | Tablet | | Small | | 24 | | `H1TS` | | | | | | Web | | Small | | 26 | | `H1WS` | | | | Body 1 | | Mobile | | Small | | 14 | | `B1MS` | | | | | | Tablet | | Small | | 16 | | `B1TS` | | | | | | Web | | Small | | 16 | | `B1WS` | | #### Mobile ![Mobile font size of the calendar](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-PWA-Anatomy-FontSize-Mobile.d0aaefc2d863.png) *Mobile font size of the calendar* #### Tablet ![Tablet font size of the calendar](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-PWA-Anatomy-FontSize-Tablet.ca6b7758a1c6.png) *Tablet font size of the calendar* #### Web ![Desktop font size of the calendar](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-PWA-Anatomy-FontSize-Web.9b1992444ef9.png) *Desktop font size of the calendar* ## Properties ### Shape The [Shape atom](/uxdesign/atom-shape/) applied to pickers with the types **Sharp** / **Rounded** / **Round**: ![Shape on PWA date picker](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-PWA-Properties-Shape.205ddf71173f.png) *Shape on PWA date picker* ### Border If the [Border Atom](/uxdesign/atom-border/) is applied, its value changes depending on the state of the component. The calendar becomes active as soon as you click on it: | Inactive State | Focus State | | -------------- | ----------- | | ↓ | ↓ | ![Border on PWA date picker](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-PWA-Properties-Border.7c480793dada.png) *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](/uxdesign/atom-shadow/), type Level 4. ![Shadow on mobile date picker](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-PWA-Properties-Shadow-Mobile.027f8f7a4611.png) *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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Datepicker-PWA-Properties-Shadow-Tablet-Web.a160058c74f7.png) *Shadow on Tablet & Desktop date picker*