DatePicker

import { DatePicker } from '@yarcl/react';

AppointmentPick a date

Value: none

Large, successPick a date

Disabled

<Field label="Appointment">
  <DatePicker value={date} onValueChange={setDate} placeholder="Pick a date" />
</Field>

The trigger is a button styled like an input, with the same base height as Input at the same size. Component size overrides can adjust either one. The calendar opens in a Popover. Values are plain Dates at the start of the day; pass name to submit them with a form as yyyy-MM-dd.

Range

mode="range" picks a start and an end day. The first pick reports { from, to: null } and keeps the calendar open; the second completes the range and closes it. Picking an end before the start swaps them.

StayCheck-in and check-out

From none to none

const [stay, setStay] = useState<DateRange | null>(null);

<DatePicker mode="range" value={stay} onValueChange={setStay} />

Limits and disabled days

min and max bound the calendar; days outside them are disabled and the month buttons stop at the limits. isDateDisabled disables any other day, such as weekends or booked dates. Disabled days can still be focused, so keyboard users hear why they can’t be picked.

Delivery dayPick a weekday

Weekdays in the next 30 days.

import { addDays, isWeekend } from 'date-fns';

<DatePicker min={addDays(today, 1)} max={addDays(today, 30)} isDateDisabled={isWeekend} />

Locale

Dates are formatted with date-fns. Pass a date-fns locale for month and weekday names and the first day of the week, displayFormat for the trigger text, and labels to translate the accessible names of the popover and month buttons.

TerminDatum wählen

German locale: week starts on Monday.

import { de } from 'date-fns/locale';

<DatePicker
  locale={de}
  displayFormat="P"
  labels={{ dialog: 'Datum wählen', previousMonth: 'Vorheriger Monat', nextMonth: 'Nächster Monat' }}
/>

Tokens

• size sets the trigger height and the size of the calendar cells.
• color sets the focus border, the picked days and today’s marker.
• radius rounds the trigger and the day cells; rounded makes circular days.
• Picked days use variant (default defaults.variant); days inside a range use defaults.softVariant.
• All four can be set for every date picker with components.DatePicker.

Keyboard

The calendar follows the WAI-ARIA date picker dialog pattern.

Key	Action
Enter Space	on the trigger, opens the calendar at the picked day, or today
← →	previous and next day
↑ ↓	same day of the previous and next week
Home End	first and last day of the week
PageUp PageDown	same day of the previous and next month
Shift + PageUp PageDown	same day of the previous and next year
Enter Space	picks the focused day
Tab	moves between the month buttons and the grid
Esc	closes without picking and returns focus to the trigger

The popover is a modal role="dialog". The calendar is a role="grid" labelled by the month heading, which is announced as it changes. Days have their full date as their name, aria-selected when picked and aria-current="date" for today. Inside a Field, the trigger is labelled by the field and described by its value.

Props

DatePicker

Accepts every native <button> attribute except color, value, defaultValue, onChange, type and name.

Prop	Type	Default	Description
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
displayFormat	string	'PP'	A date-fns format pattern for the value shown in the trigger.
isDateDisabled	(date: Date) => boolean		Returns true for days that can't be picked, e.g. weekends or booked dates. They stay focusable but can't be chosen.
labels	Partial<DatePickerLabels>	config.labels.chooseDate, config.labels.previousMonth, config.labels.nextMonth	Accessible names for the popover and the month buttons, for translation.
locale	Locale	enUS	A date-fns locale. Sets month and weekday names, the display format and the first day of the week.
max	Date		Latest day that can be picked.
min	Date		Earliest day that can be picked. Earlier days are shown disabled and the calendar can't move before its month.
name	string		Form field name. Renders a hidden input with the value as yyyy-MM-dd, or yyyy-MM-dd/yyyy-MM-dd for a range.
placeholder	ReactNode		Text shown when nothing is picked.
radius	'size' | Radiusconfig	config.defaults.radius	Border radius, from the radii config, or 'size' for the radius named like the control's size.
size	'lg' | 'xs' | 'sm' | 'md' | 'xl'	config.defaults.size	Control size, from the sizes config.
variant	Variantconfig	config.defaults.variant	Style recipe, from the component's variant map or the shared variants config.
weekStartsOn	Day	the locale's first day of the week	First day of the week, from 0 (Sunday) to 6 (Saturday).

Single mode

Prop	Type	Default	Description
defaultValue	Date | null	null	Initial value when uncontrolled.
mode	'single'	'single'	Picks one day.
onValueChange	(value: Date | null) => void		Called with the picked day.
value	Date | null		Controlled value. null means nothing is picked.

Range mode

Prop	Type	Default	Description
mode required	'range'		Picks a start and an end day.
defaultValue	DateRange | null	null	Initial value when uncontrolled.
onValueChange	(value: DateRange | null) => void		Called when the start is picked (with to: null) and again when the range is complete.
value	DateRange | null		Controlled value. null means nothing is picked.

DateRange

Prop	Type	Default	Description
from required	Date		First day of the range.
to required	Date | null		Last day of the range, or null until the second day is picked.

DatePickerLabels

Prop	Type	Default	Description
dialog required	string		Accessible name of the calendar popover.
nextMonth required	string		Accessible name of the next month button.
previousMonth required	string		Accessible name of the previous month button.