Date Picker

A date picker component with range and presets.

Powered by

Shadcn UILucideReact Day Pickerdate-fnschrono

When to use

Use this decision tree to determine when to use the Date Picker component:

Installation

The Date Picker is built using a composition of the <Popover /> and the <Calendar /> components.

See installation instructions for the Popover and the Calendar components.

Usage

'use client';
import * as React from 'react';import { format } from 'date-fns';import { Calendar as CalendarIcon } from 'lucide-react';
import { cn } from '@/registry/lib/utils';import { Button } from '@/components/ui/button';import { Calendar } from '@/components/ui/calendar';import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
export function DatePickerDemo() {  const [date, setDate] = React.useState<Date>();
  return (    <Popover>      <PopoverTrigger        render={          <Button            variant={'outline'}            className={cn('w-[280px] justify-start text-left font-normal', !date && 'text-subtle')}          >            <CalendarIcon className="mr-2 h-4 w-4" />            {date ? format(date, 'PPP') : <span>Pick a date</span>}          </Button>        }      />      <PopoverContent className="w-auto p-0">        <Calendar mode="single" selected={date} onSelect={setDate} autoFocus />      </PopoverContent>    </Popover>  );}

See the React DayPicker documentation for more information.

Examples

Date Picker

Date Picker Drawer

The drawer uses the existing embedded Calendar surface with spacing-scale11 cells: 44px targets in a 308px-wide calendar, fitting a 320px viewport without the old viewport-derived clamp. Native date selection, month/year controls and focus restoration remain unchanged.

Date Picker With Form

Date Picker Natural Language

Date Picker With Presets

Today and Tomorrow resolve the current local date when activated, including after the example has remained open across midnight. They add calendar days rather than fixed 24-hour intervals, preserving local dates across daylight-saving changes.

Date Picker With Range

Date Picker With Time Range

Date Picker With Time

Date Range Picker With Time

Credits

• We use react-day-picker for the date picker.
• We use chrono for the natural language functionality of the date picker.
• Date ranges use the existing date-fns dependency.
• We take our inspiration from Shadcn UI for the date picker style.