Date Picker

A date picker combines a date field and a calendar popover to allow users to select a date.

<DatePicker
  className="w-52"
  aria-label="Meeting date"
  defaultValue={parseDate('2020-02-03')}
>
  <InputGroup>
    <DateInput />
    <InputGroupAddon>
      <Button variant="default" size="sm" isIconOnly>
        <CalendarIcon />
      </Button>
    </InputGroupAddon>
  </InputGroup>
  <Popover>
    <DialogContent>
      <Calendar />
    </DialogContent>
  </Popover>
</DatePicker>

Installation

npx shadcn@latest add @dotui/date-picker

Usage

Use date pickers to allow users to select a date using a field and a calendar popover.

import { CalendarIcon } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import { DatePicker } from '@/components/ui/date-picker'
import { DialogContent } from '@/components/ui/dialog'
import { Label } from '@/components/ui/field'
import { DateInput, InputGroup, InputGroupAddon } from '@/components/ui/input'
import { Popover } from '@/components/ui/popover'
<DatePicker>
  <Label>Date</Label>
  <InputGroup>
    <DateInput />
    <InputGroupAddon>
      <Button variant="default" size="sm" isIconOnly>
        <CalendarIcon />
      </Button>
    </InputGroupAddon>
  </InputGroup>
  <Popover>
    <DialogContent>
      <Calendar />
    </DialogContent>
  </Popover>
</DatePicker>

Anatomy

A date picker assembles a date field and a calendar overlay. The InputGroup holds the DateInput and a trigger Button; the Popover reveals a Calendar. Label, Description, and FieldError are optional field parts.

import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import { DatePicker } from '@/components/ui/date-picker'
import { DialogContent } from '@/components/ui/dialog'
import { Description, FieldError, Label } from '@/components/ui/field'
import { DateInput, InputGroup, InputGroupAddon } from '@/components/ui/input'
import { Popover } from '@/components/ui/popover'
;<DatePicker>
  <Label />
  <InputGroup>
    <DateInput />
    <InputGroupAddon>
      <Button />
    </InputGroupAddon>
  </InputGroup>
  <Description />
  <FieldError />
  <Popover>
    <DialogContent>
      <Calendar />
    </DialogContent>
  </Popover>
</DatePicker>

Value

The value is an @internationalized/date object. Use defaultValue for uncontrolled state, or value with onChange to control it. granularity ("day", "hour", "minute", "second") sets the smallest editable unit, and minValue/maxValue bound the selectable range.

import { parseDate } from '@internationalized/date'
;<DatePicker
  defaultValue={parseDate('2020-02-03')}
  minValue={parseDate('2020-01-01')}
/>

Date range

DateRangePicker selects a start and end date as a { start, end } value. Use two DateInputs with slot="start" and slot="end", and a RangeCalendar in the popover.

import { parseDate } from '@internationalized/date'

import { RangeCalendar } from '@/components/ui/calendar'
import { DateRangePicker } from '@/components/ui/date-picker'
;<DateRangePicker
  defaultValue={{
    start: parseDate('2020-02-03'),
    end: parseDate('2020-02-12'),
  }}
>
  <InputGroup>
    <DateInput slot="start" />
    <span>–</span>
    <DateInput slot="end" />
  </InputGroup>
  <Popover>
    <DialogContent>
      <RangeCalendar />
    </DialogContent>
  </Popover>
</DateRangePicker>

Examples

Basic

With Label & Description

Meeting date
Please select a date.

Modal Variant

Drawer Variant

API Reference

DatePicker

A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.

PropType
ReactNode | function
union
Granularity
boolean
12 | 24
function
boolean
boolean
PageBehavior
T | null
boolean
T | null
T | null
function

DateRangePicker

A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.

PropType
boolean
ReactNode | function
union
Granularity
boolean
12 | 24
union
boolean
boolean
PageBehavior
T | null
boolean
RangeValue<T> | null
RangeValue<T> | null
function

Last updated on 7/9/2026