DatePicker

DatePicker uses ISO strings (YYYY-MM-DD). The Zag.js machine manages the popover, calendar grid, month navigation, and keyboard selection.

import { DatePicker } from '@manti-ui/react';

export default function DatePickerBasic() {
  return (
    <DatePicker
      label="Reservation date"
      variant="primary"
      defaultValue={['2026-06-15']}
    />
  );
}

Sizes

size sets the control's height, padding, and type, and the portalled calendar follows it down to the day cells.

Range

Set selectionMode="range" and provide two dates for a controlled or default value.

Stay

API

Prop	Type	Default	Description
`label`	`ReactNode`	—	Optional field label.
`variant`	`MantiVariant`	`'primary'`	Selection-highlight variant.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size. The portalled calendar follows it, down to the day cells.
`selectionMode`	`'single' \| 'multiple' \| 'range'`	`'single'`	Single, multiple, or range selection.
`value`	`string[]`	—	Controlled value as ISO date strings (YYYY-MM-DD).
`defaultValue`	`string[]`	—	Initial value for uncontrolled usage.
`onValueChange`	`(value: string[]) => void`	—	Called whenever the value changes; emits ISO date strings.
`locale`	`string`	—	BCP-47 locale for formatting.
`placement`	`Placement`	`'bottom-start'`	Placement of the calendar relative to the control.
`disabled`	`boolean`	—	Disable the control.
`readOnly`	`boolean`	—	Make the field read-only.
`name`	`string`	—	Form field name.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="date-picker"][data-part="root"]`	The field wrapper; carries data-variant.
`label`	`[data-scope="date-picker"][data-part="label"]`	The field label.
`control`	`[data-scope="date-picker"][data-part="control"]`	Wraps the input and calendar trigger.
`input`	`[data-scope="date-picker"][data-part="input"]`	The text input for typed dates.
`trigger`	`[data-scope="date-picker"][data-part="trigger"]`	The button that opens the calendar.
`positioner`	`[data-scope="date-picker"][data-part="positioner"]`	Positions the floating calendar.
`content`	`[data-scope="date-picker"][data-part="content"]`	The translucent calendar panel.
`view-control`	`[data-scope="date-picker"][data-part="view-control"]`	The month header with prev/next navigation.
`prev-trigger`	`[data-scope="date-picker"][data-part="prev-trigger"]`	Navigates to the previous month.
`next-trigger`	`[data-scope="date-picker"][data-part="next-trigger"]`	Navigates to the next month.
`view-trigger`	`[data-scope="date-picker"][data-part="view-trigger"]`	Switches between day, month, and year views.
`table`	`[data-scope="date-picker"][data-part="table"]`	The day grid.
`table-head`	`[data-scope="date-picker"][data-part="table-head"]`	A weekday column header.
`table-cell`	`[data-scope="date-picker"][data-part="table-cell"]`	A day cell.
`table-cell-trigger`	`[data-scope="date-picker"][data-part="table-cell-trigger"]`	The selectable day button.

Tokens

Token	Controls
`--manti-date-picker-height`	height
`--manti-date-picker-padding-x`	padding x
`--manti-date-picker-content-padding`	content padding
`--manti-date-picker-cell-size`	cell size
`--manti-date-picker-nav-size`	nav size

Last updated 13 September 2026