Date Picker

A control that allows the user to select a date.

ui.shadcn.com

Examples

Default

<C date={undefined} onDateChange={() => {}} placeholder="Pick a date" />

Disable dates

<C placeholder="Schedule for later" disabled={() => {}} fromDate={"2025-06-18T11:00:43.534Z"} />

With month and year selects

<C placeholder="Select date" captionLayout="dropdown-buttons" fromYear={1990} toYear={2030} />

Date Range Picker

<u dateRange={undefined} onDateRangeChange={() => {}} placeholder="Select date range" />

Date Range - Number of months

<u placeholder="Pick vacation dates" numberOfMonths={2} />