Date Picker
Combines a date input box with a popup calendar, letting users pick dates or ranges without navigating away from the form.
Installation
The Date Picker is a composition pattern combining Calendar, Popover, and Button primitives. Install each component:
Bash
pnpm dlx shadcn@latest add @spaceui/primitives-calendarBash
pnpm dlx shadcn@latest add @spaceui/primitives-popoverBash
pnpm dlx shadcn@latest add @spaceui/primitives-buttonUsage
Code
import * as React from 'react'
import { format } from 'date-fns'
import { IconCalendar } from '@tabler/icons-react'
import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import { Popover, PopoverPopup, PopoverTrigger } from '@/components/ui/popover'
export default function SpaceUI() {
const [date, setDate] = React.useState<Date>()
return (
<Popover>
<PopoverTrigger render={<Button className="w-[280px] justify-start text-left font-normal" variant="outline" />}>
<IconCalendar className="size-4" />
{date ? format(date, 'PPP') : <span>Pick a date</span>}
</PopoverTrigger>
<PopoverPopup align="start" className="w-auto p-0">
<Calendar mode="single" selected={date} onSelect={setDate} />
</PopoverPopup>
</Popover>
)
}Examples
Date range picker
Date picker with field and dropdown navigation
Date picker with presets
Date picker with input
Date picker that closes on select
Multiple dates picker
Date picker with select-like trigger
Two months calendar with range date
On This Page