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="secondary" 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 "@/ui/button"
import { Calendar } from "@/ui/calendar"
import { DatePicker } from "@/ui/date-picker"
import { DialogContent } from "@/ui/dialog"
import { Label } from "@/ui/field"
import { DateInput, InputGroup, InputGroupAddon } from "@/ui/input"
import { Popover } from "@/ui/popover"
<DatePicker>
  <Label>Date</Label>
  <InputGroup>
    <DateInput />
    <InputGroupAddon>
      <Button variant="secondary" 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 "@/ui/button"
import { Calendar } from "@/ui/calendar"
import { DatePicker } from "@/ui/date-picker"
import { DialogContent } from "@/ui/dialog"
import { Description, FieldError, Label } from "@/ui/field"
import { DateInput, InputGroup, InputGroupAddon } from "@/ui/input"
import { Popover } from "@/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 "@/ui/calendar"
import { DateRangePicker } from "@/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 8/3/2026