Camaleo
EN · PTGitHub
// preview in
saved for every page

Date picker

A date input you can type into or fill from a calendar popup. Use it for dates close to today, like a delivery, a booking or a deadline.

Built on React AriaPattern WAI-ARIA Date Picker DialogClient componentSource ↗
minimal · light · #3fa34d

We deliver Monday to Saturday, 8 am to 6 pm.

disabled
readOnly
invalid

Installation

Set up Camaleo once (Installation), then import what you need. Dates are @internationalized/date objects, re-exported from the library. Put the picker in a Field to give it a label.

import { DatePicker, CalendarDate, CalendarDateTime, isWeekend, Field, FieldLabel } from "@camaleo/react";

Anatomy

A box with one editable segment per date part and a button that opens a Calendar in a popup. The popup renders in a portal and keeps the skin.

11 / 14 / 2026triggerpopup
[data-slot="date-picker"] · [data-slot="date-picker-control"][data-slot="date-picker-trigger"] · [data-slot="date-picker-popup"][data-slot="date-input"] · [data-slot="date-segment"]

Examples

Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.

minimal · light · #3fa34d

We deliver Monday to Saturday, 8 am to 6 pm.

Arrives Saturday, November 14, 2026

Controlled, with the weekday

Pick another day. Spelling out the weekday in the description catches a Saturday nobody meant to pick.

Open from November 2 to December 18, 2026.

Pick a date up to December 18. The lodge closes for the holidays after that.

Earliest and latest date

minValue and maxValue cross out the days outside the range. Check the value too and set invalid on the Field, so a typed date gets a message.

Monday to Friday. Weekends are crossed out in the calendar.

Unavailable dates

isDateUnavailable with isWeekend blocks weekends for the page's locale. Say the rule in the description, because the calendar is hidden until opened.

Eastern Time (ET). Attendees see it in their own time zone.

Date and time

Pass a CalendarDateTime and granularity="minute" to add hour and minute segments. hourCycle={24} drops AM/PM where a 24-hour clock is clearer, like a webinar schedule.

The calendar opens on March 2027, when the conference runs.

Opens on the right month

Without a value the calendar opens on today. placeholderValue opens it where the dates that matter are, without filling the field.

Set when the contract was signed. Ask your account manager to change it.

Read-only

readOnly keeps the date focusable and readable, unlike disabled. Say in the description who can change it.

Required in a form

Send the form empty. The error names what is missing, is linked to the input and goes away as soon as a date is picked.

In context

Dates are part of bigger tasks. These are whole pieces of UI you can copy, in the skin you picked.

Search flights

Flight searchCard · Field · Input · DatePicker · Button

Schedule post

Eastern Time (ET). You can reschedule until it goes out.

Schedule a postCard · Field · Textarea · DatePicker · Button

New invoice

Issued on October 28, 2026.

Follows the payment terms. Change it for a one-off deal.

Invoice due dateCard · Field · Input · NativeSelect · DatePicker · Button

Guidelines

DoA calendar for dates close to today.

A delivery or a booking is a few clicks away, and the calendar shows the weekday.

Don’tA calendar for a date of birth.

Paging back 30 years month by month is slow. Use a DateField and let people type it.

Monday to Friday. Weekends are crossed out in the calendar.

DoSay which dates work.

The rule is visible before people open the calendar or type a date.

Date not available.
Don’tA rule people find out by error.

"Date not available." comes too late and does not say which dates are.

Props

DatePicker takes the props of the React Aria date picker. These are the ones you use most:

PropTypeDefaultDescription
classNamestring—Class name for the root element.
styleCSSProperties—Inline style for the root element.
openboolean—Opens or closes the calendar popup, controlled. Pair it with onOpenChange.
disabledboolean—Disables the segments and the calendar button.
readOnlybooleanfalseShows the date and keeps it focusable, but it can't be changed.
invalidboolean—Marks the picker invalid. Inside a Field, the field's invalid is used when this is not set.
requiredbooleanfalseMarks the picker as required for assistive tech.
localestring—The locale for the segment order, month names and first day of the week, like "en-US". Defaults to the browser's.
weekdayStyle"narrow" | "short" | "long""short"How the weekday names in the calendar are written. Defaults to "short".
triggerLabelstring—Accessible name of the calendar button. React Aria provides a translated default.
previousLabelstring—Accessible name of the previous month button. React Aria provides a translated default.
nextLabelstring—Accessible name of the next month button. React Aria provides a translated default.
calendarFooterReactNode—Content shown under the calendar grid, like a legend or a note.
valueDateValue | null—The current value (controlled).
defaultValueDateValue | null—The default value (uncontrolled).
onChange(value: DateValue | null) => void—Handler that is called when the value changes.
namestring—The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
onOpenChange(isOpen: boolean) => void—Handler that is called when the overlay's open state changes.
minValueDateValue—The minimum allowed date that a user may select.
maxValueDateValue—The maximum allowed date that a user may select.
isDateUnavailable(date: DateValue) => boolean—Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
placeholderValueDateValue—A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.
hourCycle12 | 24—Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
granularity"day" | "hour" | "minute" | "second"—Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
firstDayOfWeek"sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat"—The day that starts the week.

Other React Aria props pass through, such as defaultOpen, shouldCloseOnSelect, hideTimeZone, shouldForceLeadingZeros, pageBehavior and autoFocus.

Styling hooks

Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the picker itself. The calendar in the popup reads the Calendar tokens.

Attributes

data-slot"date-picker" · "date-picker-control" · "date-input" · "date-segment" · "date-picker-trigger" · "date-picker-popup"
data-openon the root while the calendar is open
data-invalidon the root, the control and the segments when invalid
data-disabledpresent when disabled
data-focus-withinon the root and the control while a segment has focus
data-placeholder · data-typeon a segment: still empty · its part (month, day, year, literal…)

Tokens it reads

Color

--cml-accent--cml-accent-fg--cml-border--cml-border-control--cml-danger--cml-fg--cml-fg-muted--cml-fg-secondary--cml-field-bg--cml-field-border-sides--cml-field-shadow--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-popover-bg--cml-popover-border--cml-shadow-popover--cml-surface-raised

Shape & size

--cml-border-width--cml-field-border-width--cml-field-height--cml-field-padding--cml-font-size-field--cml-popover-border-width--cml-radius-control--cml-radius-control-sm--cml-radius-field--cml-radius-popover

Type & motion

--cml-duration-fast--cml-ease-standard--cml-font-field

This component only

--cml-corner-shape--cml-disabled-opacity--cml-item-highlight--cml-segment-focus-bg--cml-segment-focus-border--cml-segment-focus-fg--cml-segment-focus-shadow--cml-segment-radius
/* a softer segment highlight, only in the booking form */
.booking [data-slot="date-segment"] {
  --cml-segment-focus-bg: var(--cml-item-highlight);
  --cml-segment-focus-fg: var(--cml-fg);
}

Accessibility

TabMoves between the segments, then to the calendar button.
Arrow Up / Arrow DownIncreases or decreases the focused segment.
Arrow Left / Arrow RightMoves to the previous or next segment.
0–9Types into the segment and moves on when it is complete.
BackspaceClears the focused segment.
Alt + Arrow DownOpens the calendar from a segment.
Arrow keys (calendar)Move between days. Page Up / Page Down change the month.
EnterSelects the focused day and closes the calendar.
EscapeCloses the calendar and returns focus to the button.
Date range pickerA start and an end date in one field.Date fieldA typed date, without a calendar.CalendarThe month grid on its own.
Was this page helpful? · Edit this page on GitHub