Date Picker

<DatePicker>TailwindCSS Modules

Choose dates, reporting periods, and times with a consistent family of calendar controls. Single dates, multiple selections, ranges, and time inputs share form labels, validation, clear actions, and three standard control heights.

InstallationColoxo CLI

npx coloxo add date-picker --style coloxo-css

ES Module ImportPlayground / npm package

import { DatePicker, RangePicker, TimePicker } from '@coloxo/ui';

Design Tokens:

--cx-brand-600: #2348FF--cx-color-bg-primary--cx-radius-md--cx-shadow-lg36 / 40 / 44px controls

1. Variant Matrix

Explore the picker family in empty, selected, invalid, and disabled states. Open an enabled field to interact with its calendar or time panel.

Variant	Default	Selected	Invalid	Disabled
date			Date is required.
date + time			Choose a date and time.
range			Complete the period.
time			Time is required.

2. Control heights

Picker triggers match Input and Select at 36px, 40px, and 44px. Calendar and time panels keep the same density at every trigger size.

Sizes

size="sm"

Height: 36px

Date

Time

Compact filters and dense toolbars

size="md"DEFAULT

Height: 40px

Date

Time

Standard forms and scheduling

size="lg"

Height: 44px

Date

Time

Prominent forms and touch targets

3. Selection modes & constraints

Select a day, week, month, quarter, or year. Use multiple selection for separate dates and ranges for a continuous period.

Calendar modes

Date

Week

Month

Quarter

Year

Multiple dates

Date bounds & time steps

October booking

Weekdays in October 2026 only.

Booking period

Confirm each date and time with OK.

Appointment

12-hour clock with 15-minute steps.

4. Interactive Props Configurator

Visual Render CanvasDATEPICKER | SIZE: MD

Scheduled date

No selection

tsx

1<DatePicker2  label="Scheduled date"3  size="md"4  value={date}5  onChange={setDate}6/>

5. Dark theme

Date, range, and time fields use shared surface, border, and text tokens for dark forms. Popup panels follow the page theme.

DatePicker

Invoice date

RangePicker

Report period

TimePicker

Run at

6. Enterprise layout compositions

Combine date and time controls with clear labels and supporting details in scheduling and reporting workflows.

Schedule a deployment

Choose a maintenance window for production.

Deployment date

Select the date for this release.

Start time

Export financial report

Set a reporting period before exporting.

Reporting period

Fiscal quarter

Optional quarter for comparison.

Accessibility

Keyboard access

Focus the trigger and use Enter or Space to open the panel. Calendar days support arrow-key navigation; Escape dismisses the popup.

Labels & validation

Use label for a visible field name. Description and error text are linked to the trigger, and invalid fields expose aria-invalid.

Selection feedback

Selected dates appear in the trigger. Disabled dates cannot be selected, and date-time selections are committed with the panel's OK action.

Props

Name	Type	Default	Description
size	"sm" \| "md" \| "lg"	md	Trigger height/typography; matches Input and Select. Popup density is fixed.
picker	"date" \| "week" \| "month" \| "quarter" \| "year"	date	Panel granularity for DatePicker.
showTime	boolean \| ShowTimeOptions	—	Date-time mode; commits on OK.
multiple	boolean	—	Multi-date selection (Date[]).
value / defaultValue	Date \| Date[] \| DateRangeValue	—	Controlled or initial selection. DatePicker uses Date, multiple uses Date[], RangePicker uses { from, to }, and TimePicker uses Date.
onChange	(value) => void	—	Receives the selected value for the picker type, or its empty value when cleared.
label / description / error	ReactNode	—	Visible field label, supporting text, and validation message.
disabled / required	boolean	—	Disable the field or display its required indicator.
open / defaultOpen	boolean	—	Control the popup or set its initial open state.
onOpenChange	(open: boolean) => void	—	Called when the popup opens or closes.
minuteStep / hourStep / secondStep	number	—	TimePicker: interval between options in the time columns. Also available inside showTime options.
use12Hours	boolean	—	TimePicker: use a 12-hour clock with AM/PM. Also available inside showTime options.
allowClear	boolean	true	Show clear control on the trigger.
format	string	—	Display format (date-fns tokens).
minDate	Date	—	Earliest selectable date.
maxDate	Date	—	Latest selectable date.
disabledDates	Date[] \| ((date: Date) => boolean)	—	Blocked dates.