Date Picker

To select or input a date.

Usage

Example Code

1import { DatePicker } from "inc-design-system/datePicker";

Example Code

1const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(
2new Date()
3);
4
5return (
6<DatePicker
7    selected={selectedDate}
8    onSelect={setSelectedDate}
9    placeholder="Select Date"
10/>
11);

Props

DatePicker

Prop	Type	Description	Default
today	Date	The current date.	new Date()
selected	Date	The currently selected date. If a date is selected, it will be displayed in the date picker. If no date is selected, the placeholder text will be displayed instead.	-
onSelect	(date: Date) => void	A callback function that is called when a date is selected in the date picker. The selected date is passed as an argument to this function.	-
placeholder	string	The placeholder text that is displayed in the date picker when no date is selected.	'Pick a date'
disabled	boolean	A boolean that determines whether the date picker is disabled. If `true`, the date picker is disabled and cannot be interacted with. If `false` or omitted, the date picker is enabled.	false
buttonClassName	string	A string that is added to the class list of the button element in the date picker. This can be used to add custom styles to the button.	''
dropDownClassName	string	A string that is added to the class list of the dropdown element in the date picker. This can be used to add custom styles to the dropdown.	-
calendarClassName	string	A string that is added to the class list of the calendar element in the date picker. This can be used to add custom styles to the calendar.	-
disabledDates	Matcher \| Matcher[] \| undefined	Specifies which days should be disabled in the calendar. It can disable specific dates, ranges, or days of the week. Supports complex conditions like disabling before, after, or specific days.	-
onOpenChange	function	A function that is called when the visibility of the date picker changes.	-
modal	boolean	A boolean that determines whether the date picker is displayed as a modal.	false