Date picker

v1.2.0

Date pickers allow users to choose a date or a range of dates.

Skin
CoreUI
React

Anatomy

Month navigators
Days
Date range start
Month and year
Date range selected
Date cell
Current date
Date range end
Container

Properties

Default picker

The default picker allows for a single date selection. The current date is always visible.

Dates can be disabled if they are outside of the allowed time range. This can be days prior to the current day for scheduling events, or a maximum date range for events in the past.

Date range picker

The date picker can also allow the selection of a range of dates. The first tap sets the starting date and a second tap sets the ending date. A third tap resets the date range and sets the new starting date.

Double picker

On larger screens, two months can be shown at a time using the double picker. This larger picker behaves the same as the single picker when navigating, selecting, and setting date ranges.

Date input

The date picker is typically triggered by a date input field. Simple, memorable dates will accept text input with the option to reveal a date picker calendar when interacting with the calendar icon.

Behavior

Navigating months

Both single and double pickers navigate horizontally via the top-right controls or by swiping left or right on the dates. Full screen dialog pickers scroll vertically.

A single default picker with a swiping indicator from right to left.

A full screen dialog picker with a swiping indicator from bottom to top.

State

There are multiple states for dates to indicate if they can be selected, if they are selected, what the current day is, and whether a range is set.

Platforms

Native pickers

Native Android and iOS devices leverage the OS date pickers.

Android date picker

iOS date picker

Android

Android devices use the Material date picker component. The Material date picker is available in a docked popover or modal variant.

A material design docked date picker popover.

A material design modal date picker on a mobile screen. The months are stacked.

iOS

iOS devices use the native picker components. These are available as popovers or inline pickers.

Screen sizes

Small

Date pickers in native apps use the OS pickers. HTML uses the popover or fullscreen dialog version.

A native iOS date picker in popover form.

Native date picker

A small screen html date picker as a fullscreen modal.

HTML full screen date picker

Large

Date pickers in native apps on tablet use the native OS pickers. HTML uses the popover pickers.

Best practices

Choosing a picker

Do allow users to quickly enter short dates or times.

Don’t use a date or time picker when text entry would be quicker and more convenient.

Specs

Default picker

Specs for a double date picker. The specs are the same as the default date picker, but there are two months next to each other.

Double picker

Specs for a double date picker in vertical format. There is 16px on the left and right. The days title container is 40px tall with the dates being 20px tall. The month titles are 24px tall. There is 8px between the month titles on the date cells. The date cells are 48px tall. The circular selections over the numbers are 32px tall with 8px above and below equalling the 48px. There is 16px between months.

Vertical double picker

The different colors used for the states. foreground.primary is used for the day selector text. state-layer.selected is used for the range selector background color. foreground.disabled is used for disabled text. state-layer.pressed is used for the pressed state. border-strong is used for the current date. background.inverse is used for the selected date circle. foreground.on-inverse is used for the text inside. state-layer.selected is used for the starting and ending range selector.

Selection states

Change log

Version	Date	Notes
1.2.0	Aug, 2024	Updated to eBay Evo
1.2.0	Feb, 2023	Added keyboard interaction specs
1.1.0	Jan, 2023	Added nested instance property for header component to parent date picker component Renamed calendar header layer to “header” Replaced “Calendar” in atomic layer names to “DatePicker”
1.0.0	Jul, 2022	Initial release