Forms

Date range picker

Combines an editable ISO date-range input with a calendar popover, optional presets, and range constraints.

idle

Usage

import { DateRangePicker } from "@mizen-labs/ui";

Examples

Default range

Controlled with presets

Disabled

Read-only

Native form

Month and year navigation

Jump directly to a month or year using Mizen Select. Navigation bounds define the available years.

Recommendations

Guidance	Practice
Do	Explain the range's meaning and any stay limits. Use presets only for intervals relevant to the task.

Usage boundaries

Guidance	Boundary
Scope	Define endpoint and timezone meaning in the application. Presets do not replace server validation.
Scope	A first calendar click may be a pending start; a complete range has both endpoints.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`value`	`CalendarRangeValue \| undefined`	`—`	Controlled selected date range with a required start and optional end.
`defaultValue`	`CalendarRangeValue \| undefined`	`—`	Initial selected range for uncontrolled operation.
`onValueChange`	`((value: CalendarRangeValue \| undefined) => void) \| undefined`	`—`	Called when the selected date range changes.
`disabled`	`boolean \| undefined`	`false`	Prevents interaction with the input, calendar, and presets.
`readOnly`	`boolean \| undefined`	`false`	Allows inspection without committing a changed range.
`invalid`	`boolean \| undefined`	`false`	Marks the input invalid.
`required`	`boolean \| undefined`	`false`	Requires a range before form submission.
`size`	`"default" \| "lg" \| "sm" \| undefined`	`"default"`	Visual size of the input field.
`minValue`	`Date \| undefined`	`—`	Earliest selectable date.
`maxValue`	`Date \| undefined`	`—`	Latest selectable date.
`minNights`	`number \| undefined`	`0`	Minimum number of nights in a completed range.
`maxNights`	`number \| undefined`	`—`	Maximum number of nights in a completed range.
`isDateUnavailable`	`((date: Date) => boolean) \| undefined`	`—`	Predicate that marks dates unavailable for selection.
`presets`	`readonly DateRangePreset[] \| undefined`	`—`	Optional quick-select ranges shown above the calendar.
`locale`	`CalendarLocale \| undefined`	`—`	Locale configuration for calendar labels and formatting.
`dir`	`"ltr" \| "rtl" \| undefined`	`—`	Text and calendar direction.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`	`—`	First day of the week, from Sunday (0) to Saturday (6).
`name`	`string \| undefined`	`—`	HTML form field name.
`id`	`string \| undefined`	`—`	HTML element identifier.
`aria-label`	`string \| undefined`	`—`	Accessible name when no visible label is present.
`aria-labelledby`	`string \| undefined`	`—`	ID of the element labelling the input.
`aria-describedby`	`string \| undefined`	`—`	ID of the element describing the input.
`autoFocus`	`boolean \| undefined`	`false`	Automatically focuses the text input on mount.
`DateRangePicker`	`DateRangePickerProps`	`—`	Composite date-range input with calendar and optional presets.
`captionLayout`	`"label" \| "dropdown"`	`"label"`	Use dropdown to navigate directly with month and year selects.
`startMonth`	`Date`	`100 years before today in dropdown mode`	First month available for navigation. Does not change date availability.
`endMonth`	`Date`	`End of the current year in dropdown mode`	Last month available for navigation. Does not change date availability.