Calendar

Inline Calendar

An always-visible month grid. Click a day to select it. Use arrow keys to navigate, PageUp/PageDown to change months.

Controlled selection

Pass value and onChange to control the selection externally.

Min / Max dates

Use minDate and maxDate to restrict the selectable range. Days outside the range are dimmed and unclickable.

Custom disabled dates

Pass isDateDisabled to block arbitrary dates — weekends in this example.

Range selection

Set mode="range" to enable two-click range selection. The first click sets the start; the second sets the end. Hover over days to preview the range before confirming.

Range with uncontrolled default

Use defaultRangeValue for an uncontrolled pre-filled range.

DatePicker

An input that opens the calendar in a popup. Click to open, select a date to close. The clear button (×) resets the value.

With Label

Error state

Pass a message string to error. It disappears automatically once a date is selected.

Disabled

Min / Max constraint

Only dates within the allowed window are selectable inside the picker.

Placement

The placement prop controls which direction the popup opens. "auto" (default) measures available viewport space and picks the roomier side.

DateRangePicker

Two inputs sharing a single range-mode calendar popup. Click the start input to open; click a start date, then an end date — the popup closes automatically once both are selected.

Controlled range picker

Range picker — error state

Error clears once both dates are selected.

Range picker — disabled