Selection, time, and output

Use this page after your first picker when the default single Date value is not enough. Set mode on Calendar or DatePicker; it defaults to "single".

For span modes, end is null only while a range selection is incomplete.

Range

Click a first date and then a second date. While choosing the end, hovering a date previews the span. Use numberOfMonths to display adjacent months.

import { useState } from "react";
import { Calendar, type RangeValue } from "@alydev/datepicker";
 
const [range, setRange] = useState<RangeValue>({ start: null, end: null });
 
<Calendar adapter={gregorian} mode="range" numberOfMonths={2} value={range} onChange={setRange} />;

Use minRange and maxRange to constrain the inclusive length of a range. The selected endpoint and hover preview are clamped to the closest allowed span.

<Calendar adapter={gregorian} mode="range" minRange={2} maxRange={14} />

Multiple dates

max limits the number of selected dates. Reaching it leaves the existing selection unchanged until the user deselects one.

<Calendar adapter={gregorian} mode="multiple" max={3} />

Complete spans

Week, month, quarter, and year modes calculate both boundaries immediately. They are useful when an API expects a date range but the user should select one logical period.

<Calendar adapter={gregorian} mode="quarter" onChange={console.log} />

week starts according to weekStartsOn (or the locale default).

Month and year views

MonthPicker and YearPicker are standalone views. They force month and year selection respectively, while accepting the familiar calendar props.

import { MonthPicker, YearPicker } from "@alydev/datepicker";
 
<MonthPicker adapter={gregorian} locale="en-US" />
<YearPicker adapter={gregorian} locale="en-US" pageSize={12} />

Time

TimeField (also exported as TimePicker) is a standalone wall-clock control; it does not require a date picker:

import { TimePicker, type Time } from "@alydev/datepicker";
 
const initial: Time = { hour: 9, minute: 30, second: 0, millisecond: 0 };
 
<TimePicker defaultValue={initial} hourCycle={12} variant="analog" />;

Available presentations are "field" (default), "wheel", and "analog". The field variant supports seconds; use minuteStep and secondStep to change arrow-key increments. Add withTime to DatePicker to show a date-first, then-time flow:

<DatePicker adapter={gregorian} withTime timePickerProps={{ hourCycle: 12, variant: "wheel" }} />

Send a value to a form or API

Use onChange when your React code needs a Date, date array, or range. Add onOutputChange only when another system needs a formatted string or JSON.

import { DatePicker } from "@alydev/datepicker";
import { gregorian } from "@alydev/adapter-gregorian";
 
<DatePicker
  adapter={gregorian}
  outputPattern="yyyy-MM-dd"
  onOutputChange={(value) => fetch("/api/booking", { method: "POST", body: value })}
/>;

Set outputFormat="json" when the receiver expects JSON. Do not format the value yourself unless that system requires a different convention.

Constraints apply to every mode

All modes accept the same constraints. For example, allow only future weekdays:

<Calendar adapter={gregorian} minDate={new Date()} disabledWeekdays={[0, 6]} businessDaysOnly />

Next: constrain available dates and add holidays, or read the API Reference for the full prop list.