IDateTimePickerProps

@spartanfx/react v1.2.2

---

@spartanfx/react / index / IDateTimePickerProps

Interface: IDateTimePickerProps

Props accepted by the DateTimePicker component.

Properties

Required

Property	Type	Default	Description
onChange	(date) => void	-	Callback triggered when the user commits a new value. Commit points are: - Pressing the Done button in the popup (after editing date / time / AM-PM / Now / Clear). All popup interactions update an internal draft — the parent is only notified once. - Clicking the trigger-icon clear button on the field (immediate). - Pressing Enter / blurring the trigger field when allowTextInput is enabled (immediate). - Selecting a date when showTime is false (immediate, since there is no time to confirm with). Dismissing the popup without pressing Done discards the draft. The returned Date is always expressed in the user's local timezone — only the hour and minute components are user controlled, seconds and milliseconds are reset to 0.

Options

Property	Type	Default	Description
allFocusable?	boolean	false	Whether disabled elements should remain focusable.
allowClear?	boolean	true	Whether the user can clear the field with a dedicated button.
allowTextInput?	boolean	false	Whether text input is allowed in the display field.
ariaLabel?	string	-	Aria label for the trigger button.
borderless?	boolean	false	Removes the border from the trigger TextField. Mirrors Fluent UI DatePicker's borderless.
dateTimeFormatter?	IDateFormatting	-	Advanced date formatting hook forwarded to the underlying Fluent UI Calendar.
disabled?	boolean	false	Whether the component is disabled.
errorMessage?	string	-	Optional error message displayed below the field.
firstDayOfWeek?	DayOfWeek	DayOfWeek.Sunday	First day of the week displayed in the calendar.
firstWeekOfYear?	FirstWeekOfYear	FirstWeekOfYear.FirstDay	Defines which week is considered the first week of the year.
highlightCurrentMonth?	boolean	false	Whether the calendar should highlight the current month in the month picker.
highlightSelectedMonth?	boolean	true	Whether the calendar should highlight the selected month in the month picker.
id?	string	-	Optional id applied to the root of the TextField (useful for label association in forms).
initialPickerDate?	Date	-	The date initially highlighted in the calendar when the popup opens for the first time and no value is set.
isMonthPickerVisible?	boolean	true	Whether the month picker is shown beside the day picker or hidden.
label?	string	-	Label rendered above the field.
maxDate?	Date	-	Maximum selectable date (time is ignored for boundary checks).
minDate?	Date	-	Minimum selectable date (time is ignored for boundary checks).
minuteStep?	number	1	Step (in minutes) applied by the minutes field.
openOnClick?	boolean	true	Whether the popup should open when the user clicks the input. Set to false to only open via the trigger icon.
pickerAriaLabel?	string	-	Aria label used for the popup (calendar).
placeholder?	string	'Select date & time...'	Placeholder text displayed when the field is empty.
required?	boolean	false	Whether the field is required (adds the Fluent UI required marker).
showCloseButton?	boolean	-	Whether the calendar day close button should be shown.
showGoToToday?	boolean	false	Whether the "Go to today" link should be shown in the calendar.
showMonthPickerAsOverlay?	boolean	false	Show the month picker as an overlay on top of the day picker.
showTime?	boolean	true	Whether to show the time portion.
showWeekNumbers?	boolean	false	Whether the calendar should show week numbers before each row.
strings?	ICalendarStrings	-	Localized strings forwarded to the calendar.
tabIndex?	number	-	Tab index applied to the trigger TextField.
textFieldStyles?	IDateTimePickerTextFieldStyles	-	Custom styles applied to the display TextField.
timeFormat?	TimeFormat	TimeFormat.H24	Time format used inside the popup and for the display text.
today?	Date	-	Value used as "today" inside the calendar — defaults to the current machine time when omitted.
underlined?	boolean	false	Renders the trigger TextField with the underlined variant. Mirrors Fluent UI DatePicker's underlined.
value?	Date	-	Current date/time value. null or undefined leaves the input empty.
width?	string | number	-	Width applied to the display field (CSS string or number of pixels).

Events & callbacks

Property	Type	Default	Description
formatDateTime?	(date) => string	-	Custom formatter used to display the selected date/time in the field. Replaces the default locale-aware layout.
onAfterMenuDismiss?	() => void	-	Callback invoked after the popup is dismissed (either via the Done button, clicking outside or pressing Escape). Mirrors Fluent UI's onAfterMenuDismiss callback.
parseDateTimeFromString?	(value) => Date	-	Custom parser for the text input when allowTextInput is true. Should return a valid Date or null when the input is not a valid value.
translate?	(text) => string	-	Optional localization function. Applied to every built-in label used inside the popup (Time, Now, Clear, Done, ...).

Appearance & theming

Property	Type	Default	Description
appearanceMode?	AppearanceMode	AppearanceMode.light	Appearance mode (theme).
className?	string	-	Optional class name merged with the root element.
classNames?	IDateTimePickerClassNames	-	Class name overrides applied to the inner elements.
style?	CSSProperties	-	Inline style applied to the root element.
tokens?	IDateTimePickerTokens	-	Customization tokens used to override colors, radius, sizes and animations. Merged on top of the theme derived from appearanceMode.

Advanced & escape hatches

Property	Type	Default	Description
calendarProps?	Partial<ICalendarProps>	-	Props forwarded to the underlying Fluent UI Calendar.
calloutProps?	Partial<ICalloutProps>	-	Props forwarded to the popup Callout.
iconProps?	IIconProps	-	Icon displayed inside the trigger button. Defaults to Calendar.
textField?	Partial<ITextFieldProps>	-	Props forwarded to the underlying Fluent UI TextField used as the display/trigger for the popup. Mirrors Fluent UI DatePicker's textField.