Date picker

Date field that opens a month calendar with Cancel / Apply. Single date or range.

Preview

React · live from the Storybook

HTML and CSS

The same component as plain HTML with pixels-ui.css, no framework needed.

Start date

HTML

<div class="px-field">
  <span class="px-label" id="dp-l">Start date</span>
  <div class="px-datepicker" data-px-datepicker>
    <button type="button" class="px-input px-select__trigger" aria-labelledby="dp-l dp-v"><svg class="px-icon" aria-hidden="true">…</svg><span class="px-select__value" id="dp-v" data-placeholder="Select date"></span></button>
  </div>
</div>

Usage

Also accept typed dates; the calendar is a convenience.
LTR weeks start Monday; Arabic weeks start Sunday.

Installation

Included in the core files. No extra install.

HTML

<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>

Examples

Range

data-px-datepicker="range". Pick a start, then an end.

HTML

<div class="px-datepicker" data-px-datepicker="range">
  <button type="button" class="px-input px-select__trigger" aria-label="Date range"><svg class="px-icon" aria-hidden="true">…</svg><span class="px-select__value" data-placeholder="Select dates"></span></button>
</div>

Inline calendar

data-px-calendar renders the panel on its own.

HTML

<div class="px-calendar" data-px-calendar="range" aria-label="Calendar"></div>

API reference

Class / attribute	Type	Description
`data-px-datepicker="single\|range"`	attribute	Field that opens the calendar.
`data-px-calendar="single\|range"`	attribute	Inline calendar panel.
`px-day`	class	Day cell; aria-pressed when selected.

Figma properties

Date picker4 variants · page “Date picker”Open

Date field that opens the calendar panel. Accept typed dates in the user’s locale format; the calendar is a convenience, not the only input method.

Property	Type	Values
State	Variant	Closed Open
Direction	Variant	LTR RTL

Date picker / Calendar4 variants · page “Date picker”Open

Month calendar panel with navigation, weekday header, day grid and Cancel / Apply. LTR weeks start Monday; Arabic weeks start Sunday and use Arabic-Indic digits. Grid uses role=grid; arrow keys move b…

Property	Type	Values
Type	Variant	Single Range
Direction	Variant	LTR RTL

Date picker / Day9 variants · page “Date picker”Open

One day cell. Range start/end keep a tinted half so the band reads as continuous; in RTL swap start/end. Disabled dates are struck through, not only greyed.

Property	Type	Values
Date	Text	“15”
State	Variant	Default Hover Selected Range start In range Range end Today Disabled Outside

Design tokens

Component tokens from the Figma Component collection. Override them to restyle just this component.

Token	Alias	Light value
`--px-date-picker-day-size`	spacing-36	36px
`--px-date-picker-day-radius`	radius-12	12px
`--px-date-picker-day-background-hover`	color-background-neutral-default	#f2f4f7
`--px-date-picker-day-background-selected`	color-background-brand-default	#2563eb
`--px-date-picker-day-background-range`	color-background-brand-subtle	#eff6ff
`--px-date-picker-radius`	radius-16	16px
`--px-date-picker-padding`	spacing-12	12px
`--px-date-picker-weekday`	color-content-neutral-secondary	#475467

Accessibility

Arrow keys move by day/week; Enter picks.
Disabled days are struck through, not only grey.