Date picker: Disabled

A disabled trigger can still show a value.

import { DatePicker } from "@/components/ui/date-picker"

export function DatePickerDisabled() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <DatePicker disabled />
      <DatePicker disabled defaultValue={new Date(2026, 0, 1)} />
    </div>
  )
}

Add this example

This adds the example as components/examples/date-picker/disabled.tsx, together with the Date picker component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/date-picker-disabled.json

To add only the component, follow the Date picker installation.

Props in this example

The Date picker props this example sets, from the API reference.

DatePicker

Prop	Type	Default
`defaultValue`	`Date \| null`	`null`
`disabled`	`boolean`	`false`

Every prop is in the Date picker API reference.

More Date picker examples

Controlled
Range
Disabled days
Month and year dropdowns
In a form
Narrow container
Inside a sheet
Right to left

See them all, with keyboard support and accessibility notes, on the Date picker page.

ButtonButtons in every variant and size, with a built-in loading, success and error flow that skips the spinner for fast requests.
CalendarA date grid for single, range and multiple selection, with sliding months, range previews and touch-sized days.
PopoverA floating panel anchored to a trigger that resizes smoothly with its content and follows the trigger’s direction.
SheetA panel that slides in from any edge, with swipe-to-dismiss, scroll lock and stacked nesting.
CheckboxA checkbox whose check draws in, with indeterminate parents, groups and labels that share its hover.
ComboboxA filterable select with chips, groups and async results, in a popup that resizes as you type.

Add this example

Props in this example

DatePicker

More Date picker examples

Related components