Sections

Components

Utilities

Forms

Hooks

useIsMobile

Date Picker

Copy Markdown

Input with a built-in calendar.

Docs API

PreviewCode

Pick a date

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/date-picker

Anatomy#

DatePicker
├── DatePickerTrigger
└── DatePickerContent
    ── (Calendar components)

Usage#

import {
  DatePicker,
  DatePickerCalendar,
  DatePickerClearTrigger,
  DatePickerContent,
  DatePickerControl,
  DatePickerInput,
  DatePickerLabel,
  DatePickerPositioner,
  DatePickerTrigger,
} from "@/components/ui/date-picker";

<DatePicker selectionMode="single">
  <DatePickerLabel>Pick a date</DatePickerLabel>
  <DatePickerControl>
    <DatePickerInput index={0} placeholder="Select date" />
    <DatePickerTrigger />
    <DatePickerClearTrigger asChild>
      <Button size="sm" variant="outline">Clear</Button>
    </DatePickerClearTrigger>
  </DatePickerControl>
  <DatePickerPositioner>
    <DatePickerContent>
      <DatePickerCalendar />
    </DatePickerContent>
  </DatePickerPositioner>
</DatePicker>

Examples#

Input#

Use DatePickerInput for a text input with calendar icon that opens the date picker.

PreviewCode

Range#

Select a date range with selectionMode="range".

PreviewCode

Pick a date range

Time#

Use DatePickerTimer for time selection.

PreviewCode

Time

With Presets#

Add quick single-date presets in a side panel.

PreviewCode

07/02/2026

Custom format#

Customize the format of the presets using external date formatting library like date-fns.

PreviewCode

January 15th, 2025

API Reference#

DatePicker#

Root element. Extends Calendar.

Prop	Type	Default
`value`	`DateValue[]`	-
`defaultValue`	`DateValue[]`	-
`onValueChange`	`(details: ValueChangeDetails) => void`	-
`selectionMode`	`"single"	"range"
`positioning`	`PositioningOptions`	`{ placement: "top" }`
`lazyMount`	`boolean`	-
`unmountOnExit`	`boolean`	-

DatePickerTrigger#

Button that opens the date picker. button

Prop	Type	Default
`asChild`	`boolean`	-
`className`	`string`	-

DatePickerInput#

Input with calendar icon that opens the date picker on click. input

Prop	Type	Default
`placeholder`	`string`	-
`index`	`number`	-
`size`	`"sm"	"md"
`className`	`string`	-

DatePickerContent#

Wraps the calendar. Inherits --cell-size from calendar for date cell sizing.

Prop	Type	Default
`className`	`string`	-

Attribute	Default
`--cell-size`	`--spacing(8)`

DatePickerValue#

Displays the selected date(s) as text. Use inside DatePickerTrigger. span

Prop	Type	Default
`placeholder`	`string`	-
`className`	`string`	-
`asChild`	`boolean`	-

DatePickerTimer#

Time input for selecting hour and minute. Use alongside the calendar for date-time selection. input

Prop	Type	Default
`value`	`string`	-
`defaultValue`	`string`	-
`onValueChange`	`(details: ValueChangeDetails) => void`	-
`className`	`string`	-

DatePickerPresetTrigger#

Quick preset button for dates. button

Prop	Type	Default
`className`	`string`	-
`value`	`DateValue[]`	-
`asChild`	`boolean`	-

For a complete list of props, see the Ark UI documentation.

[

Date Input ](/docs/components/date-input)[

Dialog ](/docs/components/dialog)

On This Page

Installation Anatomy Usage Examples Input Range Time With Presets Custom format API Reference DatePicker DatePickerTrigger DatePickerInput DatePickerContent DatePickerValue DatePickerTimer DatePickerPresetTrigger