Datetimepicker Component

The DateTimePicker component provides an input with an integrated calendar and time popup for selecting a single date and time value. It supports date and time formatting, parsing, min/max date-time constraints, strict mode validation, custom calendar and time templates, and can be rendered as an inline picker or a dialog-based picker.

Usage

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

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

export default function App() {
return <DateTimePicker />;
}

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

export default function App() {
return <DateTimePicker />;
}

Demos

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

Props

The following table outlines the props for the Datetimepicker component:

Name	Type	Default	Description
cellTemplate	((props: CalendarCellProps) => node)	-	Specifies a custom template for rendering the content of each calendar cell. Can be a React node or a function that returns a React node.
clearButton	boolean	true	Specifies whether to show the clear button within the input field.
defaultValue	Date \| null	-	Specifies the initial date-time value when the component manages its own state (uncontrolled mode).
depth	CalendarView	CalendarView.Month	Sets the most granular view the user can navigate down to. For example, a `depth` of `Year` prevents navigation to the `Month` view.
disableFutureDays	boolean	false	When `true`, disables all dates in the future relative to the current day.
disableOtherMonthNavigation	boolean	false	Prevents navigation when clicking on dates from other months in month view
disablePastDays	boolean	false	When `true`, disables 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: `0` for Sunday, `1` for Monday, and so on. If not set, the first day is determined by the locale.
format	string	'MM/dd/yyyy h:mm a'	Specifies the display/parse format used for the text input combining both date and time tokens (e.g., 'MM/dd/yyyy h:mm a' or 'yyyy-MM-dd HH:mm'). Parsing is strict to supported tokens; locale-aware names/symbols are applied.
headerTemplate	((props: CalendarHeaderProps) => node)	-	Specifies a custom template for the calendar header. If not provided, a default header with navigation controls is rendered.
inputFormats	string[]	[ ]	Specifies additional patterns accepted when parsing typed input. The first pattern that successfully parses wins; does not affect display formatting.
itemTemplate	(time: Date) => node	-	Specifies a custom template renderer for time list items.
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 Calendar.
maxTime	Date	-	Specifies the upper boundary for selectable time on the active day; only the time portion is considered.
minDate	Date	new Date(1900, 0, 1)	Specifies the minimum date that can be selected in the Calendar.
minTime	Date	null	Specifies the lower boundary for selectable time on the active day; only the time portion is considered.
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.
pickerIcon	node	undefined	Specifies the calendar/datepicker icon rendered in the input.
pickerVariant	PickerVariant	'Auto'	Specifies the popup presentation variant: inline, dialog, or 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	When `true`, shows dates from the previous and next months in the current month's view.
showTodayButton	boolean	true	Specifies whether the DateTime picker shows the "Today" action for quick return to the current date.
size	Size	Size.Medium	Specifies the size style of the Timepicker. Options include 'Small', 'Medium' and 'Large'.
start	CalendarView	CalendarView.Month	Specifies the initial view that the calendar renders.
step	number	30	Specifies the minutes between adjacent time options in the time list.
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 controlled date-time value of the picker. When provided, the component operates in controlled mode and relies on `onChange` to notify updates.
variant	Variant	Variant.Standard	Specifies the visual style variant of the component.
weekDaysFormat	WeekDaysFormats	WeekDaysFormats.Short	Specifies the format of the day names to be displayed in the week header.
weekNumber	boolean	false	When `true`, displays the week number of the year in the month view.
weekRule	WeekRule	WeekRule.FirstDay	Specifies the rule for defining the first week of the year.
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 Datetimepicker component:

Name	Type	Description
onChange	(event: DateTimePickerChangeEvent) => void	Triggers when the DateTimePicker 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 navigates to a new view or date range.

Datetimepicker Component

Usage

Demos

Props

Events

Enhance your React apps with Syncfusion components today