Date Picker

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

232020

<DatePicker 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

npm

pnpm

yarn

bun

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, InputAddon, InputGroup } from "@/components/ui/input";
import { Overlay } from "@/components/ui/overlay";

<DatePicker>
	<Label>Date</Label>
	<InputGroup>
		<DateInput />
		<InputAddon>
			<Button variant="default" size="sm" isIconOnly>
				<CalendarIcon />
			</Button>
		</InputAddon>
	</InputGroup>
	<Overlay type="popover" mobileType="drawer">
		<DialogContent>
			<Calendar />
		</DialogContent>
	</Overlay>
</DatePicker>

Examples

232020

Meeting date

mmddyyyy

Appointment

mmddyyyy

Please select a date.

Meeting date

mmddyyyy

Meetings can't be scheduled in the past.

Meeting date

mmddyyyy

Hour

4720216PMUTC

Minute

472021645PMUTC

Second

47202164522PMUTC

Appointment date

mmddyyyy––––

1172021745AMUTC

Appointment time

11720221045AM

mmddyyyy

Event date

111980

Event date

mmddyyyy

Meeting date

mmddyyyy

Please select a date.

232020

Meeting date

232020

selected date: 2020-02-03

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.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`union`	`—`
	`Granularity`	`—`
	`boolean`	`false`
	`12 \| 24`	`—`
	`((date: DateValue) => boolean)`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`PageBehavior`	`visible`
	`T \| null`	`—`
	`DOMRenderFunction<"div", DatePickerRenderProps>`	`—`
	`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.

Prop	Type	Default
	`boolean`	`—`
	`ReactNode \| function`	`—`
	`union`	`—`
	`Granularity`	`—`
	`boolean`	`false`
	`12 \| 24`	`—`
	`union`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`PageBehavior`	`visible`
	`T \| null`	`—`
	`DOMRenderFunction<"div", DateRangePickerRenderProps>`	`—`
	`boolean`	`—`

	`RangeValue<T> \| null`	`—`
	`RangeValue<T> \| null`	`—`
	`function`	`—`

Last updated on 6/4/2026