Forms

Date picker

Combines an editable ISO date input with an integrated Calendar popover, strict constraint validation, and keyboard interaction.

idle

Usage

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

Examples

Uncontrolled

Controlled

Bounded

Disabled

Read-only

Invalid

Month and year navigation

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

Recommendations

Guidance	Practice
Do	Label the date's purpose and state its constraints. Keep editable input and calendar selection available.

Usage boundaries

Guidance	Boundary
Scope	Values are dates, not timestamps. Use Date Time Input when the task requires a local time as well.

API reference

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

Prop	Type	Default	Description
`value`	`Date \| undefined`	`—`	Controlled date selection value.
`defaultValue`	`Date \| undefined`	`—`	Initial date selection value in uncontrolled mode.
`onValueChange`	`(value: Date \| undefined) => void`	`—`	Event handler called when date selection changes.
`disabled`	`boolean`	`false`	Prevents user interaction when true.
`readOnly`	`boolean`	`false`	Marks the input as read-only; opens calendar for inspection without selection commit.
`invalid`	`boolean`	`false`	Indicates invalid input value or constraint violation.
`required`	`boolean`	`false`	Requires a value before form submission.
`size`	`"default" \| "lg" \| "sm"`	`"default"`	Visual size variant of the input field.
`minValue`	`Date \| undefined`	`—`	Minimum selectable and valid date boundary.
`maxValue`	`Date \| undefined`	`—`	Maximum selectable and valid date boundary.
`isDateUnavailable`	`((date: Date) => boolean) \| undefined`	`—`	Callback to determine whether a given date is unavailable for selection.
`locale`	`CalendarLocale \| undefined`	`—`	Locale configuration passed to the calendar grid.
`dir`	`"ltr" \| "rtl" \| undefined`	`—`	Text direction for layout and navigation.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`	`—`	First day of the week (0 for Sunday, 1 for Monday, etc.).
`name`	`string \| undefined`	`—`	HTML form field name.
`id`	`string \| undefined`	`—`	HTML element identifier.
`aria-label`	`string \| undefined`	`—`	Accessible label text when no visual label is present.
`aria-labelledby`	`string \| undefined`	`—`	ID of element labelling this input.
`aria-describedby`	`string \| undefined`	`—`	ID of element describing this input.
`autoFocus`	`boolean \| undefined`	`false`	Automatically focuses the text input on mount.
`DatePicker`	`DatePickerProps`	`"div"`	Composite single-date picker with editable text input and calendar popover.
`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.