Date Picker

Forms

Date

Calendar-based date selection with month/year navigation, today indicator, and quick-select button. Ideal for forms requiring single date input.

Preview

Basic date picker with placeholder

With Label

Date picker with form label

Date of Birth

With Default Value

Pre-selected date

Appointment Date

Disabled State

Date picker in disabled state

Disabled

Props

DatePicker component API reference

Prop	Type	Default	Description
`value`	`Date \| null`	—	Selected date value
`onChange`	`(date: Date \| null) => void`	—	Callback when date is selected
`label`	`string`	—	Label text above the picker
`placeholder`	`string`	`'Select date'`	Placeholder when no date selected
`disabled`	`boolean`	`false`	Disable the date picker
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

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

export default function Example() {
  const [date, setDate] = useState<Date | null>(null)

  return (
    <>
      {/* Basic usage */}
      <DatePicker
        label="Select Date"
        value={date}
        onChange={setDate}
        placeholder="Pick a date"
      />

      {/* With default value */}
      <DatePicker
        label="Appointment"
        value={new Date()}
        onChange={setDate}
      />
    </>
  )
}

Features

Built-in functionality

Calendar view: Full month calendar with 6-week display
Month navigation: Previous/next month buttons
Today indicator: Current date highlighted with border
Today button: Quick-select button to jump to today
Selected date highlight: Visual indicator for selected date
Click outside to close: Dropdown closes on outside click
Localized format: Date displayed in locale format
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Trigger button is focusable and activates calendarCalendar dates are navigable buttonsSelected date indicated visually and programmatically

Keyboard Navigation

Key	Action
`Tab`	Focus trigger button
`Enter / Space`	Open calendar / Select date
`Escape`	Close calendar

Notes

Calendar icon provides visual affordance
Today highlighted with distinct border
Non-current month dates shown in muted color
Selected date shows filled background

Related Components

Date Range Picker Time Picker Calendar Input