Date Picker

A date picker is an interactive element that allows users to select a date or range of dates from a graphical calendar interface.

Overview

The purpose of date pickers is to simplify the selection and input of dates, reducing errors and enhancing the user experience when working with date-related data or functionalities.

Date pickers display a calendar grid, allowing users to navigate through months and years to find the desired date. By clicking or tapping on a specific date, users can select it, triggering actions like populating a field or modifying items in the interface.

A date picker showing the days in a specific month of the year.

Resources

Figma Component	Available
Figma Documentation	Planned
Web Components	TBC
Vue [Fozzie]	N/A
React [Snacks]	N/A
iOS JustUI [UI Kit]	TBC
iOS PIE [SwiftUI]	TBC
Android [XML views]	TBC
Android [Jetpack compose]	TBC