datepicker.md

datepicker (component)

General datepicker component.

name	type	default value	description
allowSameDay	bool	false
ariaDescribedBy	string	null
ariaInvalid	string	null
ariaLabelledBy	string	null
ariaRequired	string	null
autoComplete	string
autoFocus	bool
calendarClassName	string
children	node
className	string
clearButtonTitle	string
clearButtonClassName	string		Customize the clear button
customInput	element
customInputRef	string	'ref'	The property used to pass the ref callback
dateFormat	union(string|array)	'MM/dd/yyyy'
dateFormatCalendar	string	'LLLL yyyy'
dayClassName	func
weekDayClassName	func
yearClassName	func
disabled	bool	false
disabledKeyboardNavigation	bool	false
dropdownMode (required)	enum('scroll'|'select')	'scroll'
endDate	instanceOf(Date)
excludeDates	array
excludeDateIntervals	array
excludeTimes	array
excludeScrollbar	array
filterDate	func
filterTime	func
fixedHeight	bool
focusSelectedMonth	bool	false
forceShowMonthNavigation	bool
formatWeekNumber	func
highlightDates	array
holidays	array		The list of holidays. An array consisting of date(yyyy-mm-dd) and holidayName, For example: holidays={[{date: '2023-08-15',holidayName:"Holiday 1"},{date: '2023-12-31',holidayName:"Holiday 2"}]}. If multiple unique holiday names are provided for same date, it will display both in comma separated string.
id	string
includeDates	array
includeDateIntervals	array
includeTimes	array
injectTimes	array
inline	bool
isClearable	bool
locale	string
maxDate	instanceOf(Date)
maxTime	instanceOf(Date)
minDate	instanceOf(Date)
minTime	instanceOf(Date)
monthsShown	number	1
name	string
onBlur	func	function() {}
onCalendarClose	func
onCalendarOpen	func
onChange (required)	func	function() {}
onChangeRaw	func
onClickOutside	func	function() {}
onFocus	func	function() {}
onKeyDown	func	function() {}
onMonthChange	func	function() {}
onSelect	func	function() {}
onWeekSelect	func
onYearChange	func	function() {}
openToDate	instanceOf(Date)
peekNextMonth	bool
placeholderText	string
popperClassName	string
popperContainer	func
popperModifiers	object
popperPlacement	enumpopperPlacementPositions
preventOpenOnFocus	bool	false	When this is true, the datepicker will not automatically open when the date field is focussed
readOnly	bool
required	bool
scrollableYearDropdown	bool
selected	instanceOf(Date)
selectsEnd	bool
selectsStart	bool
shouldCloseOnSelect	bool	true
showMonthDropdown	bool
showTimeSelect	bool	false
showWeekNumbers	bool
showYearDropdown	bool
startDate	instanceOf(Date)
startOpen	bool
tabIndex	number
timeClassName	func
timeFormat	string
timeIntervals	number	30
title	string
todayButton	node
useWeekdaysShort	bool
utcOffset	union(number|string)
value	string
weekLabel	string
withPortal	bool	false
portalId	string
portalHost	instanceOf(ShadowRoot)		When set, portals will be attached to this ShadowRoot instead of the document body.
wrapperClassName	string
yearItemNumber	number	12
yearDropdownItemNumber	number
icon	string or element		Allows using a custom calendar icon. Accepts a string (icon class name) or a React component (e.g., custom SVG). If a string is passed, an <i> element is rendered with that string as its class name. If a React component is passed, it is rendered as-is.
calendarIconClassname	string		this props is deprecated. should use calendarIconClassName props.
calendarIconClassName	string		Accepts a string that will be added as an additional CSS class to the calendar icon, allowing further styling customization.
showIcon	bool	true	Determines whether the calendar icon is displayed. Set to true to display the icon, and false to hide it. If icon prop is also provided, the custom icon will be displayed when showIcon is true.
usePointerEvent	bool	false	True if Pointer Events (e.g, onPointerEnter, onPointerLeave) are used internally instead of Mouse Events (e.g, onMouseEnter, onMouseLeave).