Date Picker

Features

• Single, range, and multiple selection via one Root API (mode).
• Segmented date input powered by timescape — locale-aware order and separators.
• Popover calendar with Floating UI positioning, or inline calendar via composition.
• Full keyboard navigation across segments, day/month/year grids — RTL-aware arrows.
• WAI-ARIA grid and spinbutton semantics built in.
• Unavailable dates (focusable, not selectable) vs disabled dates.
• HiddenInput for native HTML form submission.
• Form props: name, required, invalid, errorMessage.
• Unstyled — style with className, style, and data-* attributes.
• Localization via Intl (locale, weekStartsOn, dir) — no bundled locale data.
• Customizable screen-reader messages via messages prop.
• Time segments via granularity (hour, minute, second) — powered by timescape.
• DatePicker.Presets + useDatePickerActions for shortcut buttons.
• pageBehavior for multi-month grids; allowsNonContiguousRanges for booking ranges.
• Fully controlled mode="multiple" with value sync.

Installation

Install the Date Picker primitive on its own, or use the aggregator @kenos-ui/react package if you already depend on other Kenos primitives.

Install a package

pnpm add @kenos-ui/react-datepicker

pnpm add @kenos-ui/react

Import

import { DatePicker } from "@kenos-ui/react-datepicker";

import { DatePicker } from "@kenos-ui/react";

Examples

Every demo is interactive and keyboard-navigable.

Default

The README pattern — controlled state with useState, segmented Input, Trigger, and the Calendar shorthand. Toggle the code tabs to see unstyled, CSS, Tailwind, and Panda CSS approaches.

Styling works with plain className on each part, then data-* selectors from your Content scope for calendar cells. Keep display: table-cell on td[role=gridcell] — do not use flex/grid on table cells.

Composition

For full control, compose ViewControl, Grid, and Day with a render prop instead of the Calendar shorthand.

Composables

Use only the parts you need — input-only, calendar-only, or the full popover path in Default.

Controlled

Pass value and onValueChange on DatePicker.Root for fully controlled state.

Date Range

Set mode="range" with dual inputs (index={0} and index={1}). Live hover preview styles days with data-in-range. Press Escape after picking a start date to cancel the pending anchor without closing the popover.

Multiple Dates

mode="multiple" toggles dates on click. Pass value and onValueChange for fully controlled sync — programmatic updates and form resets stay in step with the calendar. Keep the popover open with closeOnSelect={false}.

Localization

Segment order, separators, weekday names, and week start derive from Intl. Pass any BCP 47 locale tag.

Min and Max

Clamp the selectable range with minDate and maxDate on Root. Disabled dates show data-disabled.

Disabled Dates

Pass disabled={(date) => boolean} to disable specific dates — weekends in this example. Disabled cells receive no focus and use aria-disabled.

Unavailable Dates

Use unavailable when dates should stay focusable for keyboard users but must not be selected — e.g. booked slots. Cells expose data-unavailable and rich aria-label text.

Form Native

Add DatePicker.HiddenInput with name on Root for native <form> submission. Pair with required for browser validation.

Invalid State

Set invalid and errorMessage on Root to wire aria-invalid and aria-errormessage on the input group. Style with data-invalid on Root.

RTL

Pass dir="rtl" (or rely on document.dir) to mirror arrow-key navigation in day, month, and year grids.

Presets

Wrap shortcut buttons in DatePicker.Presets inside Content. Use useDatePickerActions() for selectDate, selectRange, selectToday, and related helpers — no manual dispatch wiring.

Time Granularity

Set granularity to "hour", "minute", or "second" to add time segments via timescape. Use hourCycle={12 | 24} to force 12h or 24h display. Calendar selection updates the date portion and preserves the current time.

Non-contiguous Ranges

By default, completing a range fails when unavailable dates sit between start and end. Set allowsNonContiguousRanges on mode="range" to allow booking-style ranges that skip unavailable days (weekends, blocked slots).

Page Behavior

pageBehavior="visible" (default) changes the visible month on PageUp/PageDown. pageBehavior="single" moves focus by one month without changing the month header while the target day is still rendered in the grid — useful for future multi-month layouts.

<DatePicker.Root pageBehavior="single">
  <DatePicker.Content><DatePicker.Calendar /></DatePicker.Content>
</DatePicker.Root>

Year Navigation

In year view, PrevTrigger / NextTrigger page through 12-year windows. minDate / maxDate disable out-of-range years.

Form Integration

Bind value and onValueChange to your form library. All examples validate with Zod.

Styling

Target data-* on Root and day cells. Root exposes data-open, data-invalid, data-focus-within, and more for field-level states.

Accessibility

Kenos implements the WAI-ARIA date picker and grid patterns. Roles, labels, and focus management are handled for you. Disabled dates are removed from the tab order; unavailable dates remain focusable with descriptive labels.

Roles and state

Keyboard support

Behavior depends on which part has focus — trigger, segments, or calendar grid. Try the inline calendar below with arrow keys.

API Reference

Props, data attributes, and keyboard interactions. Import from @kenos-ui/react-datepicker.