Date Picker
A date picker built by composing Calendar and Popover.
Date Picker is a composition, not a Registry item: it pairs Calendar with Popover so a Button opens a calendar in a popup.
Installation
There is no @kosori/date-picker item. Install the two components it composes:
npx shadcn@latest add @kosori/calendar @kosori/popoverExample
Usage
'use client';
import { IconCalendar } from '@tabler/icons-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import {
Popover,
PopoverPopup,
PopoverTrigger,
} from '@/components/ui/popover';
const DatePicker = () => {
const [date, setDate] = useState<Date | undefined>();
return (
<div className='not-prose flex min-h-40 items-center justify-center rounded-xl border p-6'>
<Popover>
<PopoverTrigger
render={<Button className='w-64 justify-start' variant='outline' />}
>
<IconCalendar aria-hidden='true' />
{date ? date.toLocaleDateString() : 'Pick a date'}
</PopoverTrigger>
<PopoverPopup>
<Calendar
defaultMonth={date}
mode='single'
onSelect={setDate}
selected={date}
/>
</PopoverPopup>
</Popover>
</div>
);
};