Date Picker

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/date-picker.json

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.

Range

Select a date range with selectionMode="range".

Time

Use <DatePickerTimer /> for time selection.

With Presets

Add quick single-date presets in a side panel.

Custom format

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

API Reference

DatePicker

Root element. Extends Calendar.

DatePickerTrigger

Button that opens the date picker. button

DatePickerInput

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

DatePickerContent

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

DatePickerValue

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

DatePickerTimer

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

DatePickerPresetTrigger

Quick preset button for dates. button

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