Date Picker

A controlled input component that opens a calendar popover for selecting a single date.

import { DatePicker } from '@kaynora/ui'

export default function () {
  return (
    <DatePicker label='Select date' />
  )
}

The disabled prop determines whether the input is interactive.

import { DatePicker } from '@kaynora/ui'

export default function () {
  return (
    <DatePicker label='Select date' disabled />
  )
}

The minValue and maxValue props determine the earliest and latest selectable dates.

import { DatePicker } from '@kaynora/ui'

export default function () {
  return (
    <DatePicker
      label='Select date'
      minValue={new Date(2025, 0, 10)}
      maxValue={new Date(2025, 0, 24)}
      defaultValue={[new Date(2025, 0, 17)]}
    />
  )
}

<DatePicker />
PropTypeDefault
label
string
—
minValue
Date
undefined
maxValue
Date
undefined
value
Date[]
undefined
defaultValue
Date[]
undefined
onChange
(value: Date[]) => void
undefined
disabled
boolean
false
internal
{
  root: HTMLDivElementProps
  trigger: HTMLDivElementProps
  input: HTMLInputElementProps
  typography: TypographyProps
  popover: PopoverProps
  calendar: CalendarProps
}
undefined