Components
Loading preview...
A DatePicker combines a DateField and a Calendar popover to allow users to enter or select a date value. A date picker can be built using <input type="date">, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. DatePicker helps achieve accessible and international date and time pickers that can be styled as needed.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/date-pickerimport { CalendarIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
Calendar,
CalendarCell,
CalendarGrid,
CalendarGridBody,
CalendarGridHeader,
CalendarHeaderCell,
CalendarHeading,
} from "@/components/ui/calendar"
import {
DatePicker,
DatePickerContent,
} from "@/components/ui/date-picker"
import { DateInput } from "@/components/ui/datefield"
import { FieldGroup, Label } from "@/components/ui/field"
export function DatepickerDemo() {
return (
<DatePicker className="min-w-[208px] space-y-1">
<Label>Date</Label>
<FieldGroup>
<DateInput className="flex-1" variant="ghost" />
<Button
variant="ghost"
size="icon"
className="mr-1 size-6 data-[focus-visible]:ring-offset-0"
>
<CalendarIcon aria-hidden className="size-4" />
</Button>
</FieldGroup>
<DatePickerContent>
<Calendar>
<CalendarHeading />
<CalendarGrid>
<CalendarGridHeader>
{(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
</CalendarGridHeader>
<CalendarGridBody>
{(date) => <CalendarCell date={date} />}
</CalendarGridBody>
</CalendarGrid>
</Calendar>
</DatePickerContent>
</DatePicker>
)
}