Date Picker

Docs

Date Picker

A date picker component that allows users to select a date from a calendar.

Date

Disabled

Error

npx shadcn add https://extend-ui.com/registry/date-picker.json

Name	Type	Description
variant	default \| glowingRing \| outline	Determines the visual style of the calendar. Options include `default`, `glowingRing` (adds a glowing border), and `outline` (adds a bordered style).
className	string	Additional CSS classes to style the calendar's root element.
classNames	Record<string, string>	Custom class names for specific calendar parts (e.g., days, rows, navigation buttons). Overrides default classes.
showOutsideDays	boolean	If `true`, displays days from the previous and next months within the current month's grid. Defaults to `true`.
month	Date	The current month displayed in the calendar. Useful for controlled components.
onMonthChange	(month: Date) => void	Callback function triggered when the displayed month changes.
...props	React.ComponentProps<typeof DayPicker>	Additional props passed to the underlying `DayPicker` component from `react-day-picker`.