DatePicker Component

The DatePicker component provides an input with an integrated calendar popup for selecting a single date. It supports formatting, parsing, min/max date constraints, validation, strict mode, custom calendar templates, and inline or dialog picker variants.

Usage

To import and use the DatePicker component in your application, use the following code snippet:

import { DatePicker } from '@syncfusion/react-calendars';

export default function App() {
return <DatePicker placeholder="Choose a date" />;
}

import { DatePicker } from '@syncfusion/react-calendars';

export default function App() {
return <DatePicker placeholder="Choose a date" />;
}

Demos

Explore the demos of the React DatePicker component. Refer to this page.

Props

The following table outlines the props for the DatePicker component:

Name	Type	Default	Description
cellTemplate	((props: CalendarCellProps) => node)	-	Specifies a template for rendering custom content in each day cell of the calendar. Can be a React node or a function that returns a React node using calendar cell context.
clearButton	boolean	true	Specifies whether to show the clear button within the input field.
defaultValue	Date	-	Specifies the default selected date of the DatePicker for uncontrolled mode.
depth	CalendarView	Month	Sets the maximum level of view such as month, year, and decade. Depth view should be smaller than the start view to restrict its view navigation.
disableFutureDays	boolean	false	Specifies whether to disable all dates in the future relative to the current day.
disablePastDays	boolean	false	Specifies whether to disable all dates in the past relative to the current day.
disabled	boolean	false	Specifies whether the component is disabled or not.
editable	boolean	true	Specifies whether the input field can be edited directly. When false, only allows selection via calendar.
firstDayOfWeek	number	0	Specifies the first day of the week for the calendar.
footerTemplate	((props: CalendarFooterProps) => node)	-	Specifies a template for rendering custom content in the footer of the calendar. If not specified, the default footer with the "Today" button is rendered.
format	string	'M/d/yyyy'	Specifies the date format string for displaying and parsing date values. Examples: 'MM/dd/yyyy', 'yyyy-MM-dd', etc.
headerTemplate	((props: CalendarHeaderProps) => node)	-	Specifies a custom template for the calendar header. Accepts either a React node or a function that returns a React node. If not specified, the default header is rendered.
inputFormats	string[]	-	Specifies an array of acceptable date input formats for parsing user input. Can be an array of strings or FormatObject.
labelMode	LabelMode	'Never'	Specifies the float label behavior. Possible values: `Never` - The label will never float. `Auto` - The label floats when the input has focus, value, or placeholder. `Always` - The label always floats.
maxDate	Date	new Date(2099, 11, 31)	Specifies the maximum date that can be selected in the DatePicker.
minDate	Date	new Date(1900, 0, 1)	Specifies the minimum date that can be selected in the DatePicker.
open	boolean	false	Specifies whether the calendar popup is open or closed.
openOnFocus	boolean	false	When true, should open the calendar popup on input focus.
orientation	Orientation	Orientation.Vertical	When set, defines the calendar's layout orientation.
pickerVariant	PickerVariant	PickerVariant.Auto	Specifies the display variant of the calendar popup. Inline: anchored popup near the input (both desktop and mobile) Dialog: centered dialog overlay (both desktop and mobile) Auto: desktop = Inline, mobile = Dialog
placeholder	string	-	Specifies the placeholder text to display in the input box when no value is set.
readOnly	boolean	false	Specifies whether the component is in read-only mode. When enabled, users cannot change input value or open the picker.
required	boolean	false	Specifies whether the DatePicker is a required field in a form. When set to true, the component will be marked as required.
showDaysOutsideCurrentMonth	boolean	true	Specifies whether to show dates from the previous and next months in the current month's view.
showTodayButton	boolean	true	Specifies whether the today button is to be displayed or not.
showToolBar	boolean	false	Specifies whether the toolbar should be displayed.
start	CalendarView	Month	Specifies the initial view of the Calendar when it is opened.
strictMode	boolean	false	Enables strict date validation mode. When enabled, invalid values are prevented or auto-corrected.
valid	boolean	false	Overrides the validity state of the component. If valid is set, the required property will be ignored.
validationMessage	string	-	Controls the form error message of the component.
validityStyles	boolean	true	If set to false, no visual representation of the invalid state of the component will be applied.
value	Date \| null	-	Specifies the selected date of the DatePicker for controlled usage.
variant	Variant	Variant.Standard	Specifies the visual style variant of the component.
weekDaysFormat	WeekDaysFormats	Short	Specifies the format of the day that to be displayed in header. Possible formats are: `Short` - Sets the short format of day name (like Su) in day header. `Narrow` - Sets the single character of day name (like S) in day header. `Abbreviated` - Sets the min format of day name (like Sun) in day header. `Wide` - Sets the long format of day name (like Sunday) in day header.
weekNumber	boolean	false	Specifies whether the week number of the year is to be displayed in the calendar or not.
weekRule	WeekRule	FirstDay	Specifies the rule for defining the first week of the year. Used only if `weekNumber` is enabled.
zIndex	number	1000	Sets the z-index value for the dropdown popup, controlling its stacking order relative to other elements on the page.

Events

The following table outlines the events for the DatePicker component:

Name	Type	Description
onChange	(event: DatePickerChangeEvent) => void	Triggers when the DatePicker value is changed.
onClose	( ) => void	Triggers when the calendar popup closes.
onOpen	( ) => void	Triggers when the calendar popup opens.
onViewChange	(event: ViewChangeEvent) => void	Triggers when the Calendar is navigated to another level or within the same level of view.