IDateTimePickerProps

@spartanfx/react v1.1.0

---

@spartanfx/react / index / IDateTimePickerProps

Interface: IDateTimePickerProps

Props accepted by the DateTimePicker component.

Properties

Property	Type	Description
allFocusable?	boolean	Whether disabled elements should remain focusable. Default false
allowClear?	boolean	Whether the user can clear the field with a dedicated button. Default true
allowTextInput?	boolean	Whether text input is allowed in the display field. Default false
appearanceMode?	AppearanceMode	Appearance mode (theme). Default AppearanceMode.light
ariaLabel?	string	Aria label for the trigger button.
borderless?	boolean	Removes the border from the trigger TextField. Mirrors Fluent UI DatePicker's borderless. Default false
calendarProps?	Partial<ICalendarProps>	Props forwarded to the underlying Fluent UI Calendar.
calloutProps?	Partial<ICalloutProps>	Props forwarded to the popup Callout.
className?	string	Optional class name merged with the root element.
classNames?	IDateTimePickerClassNames	Class name overrides applied to the inner elements.
dateTimeFormatter?	IDateFormatting	Advanced date formatting hook forwarded to the underlying Fluent UI Calendar.
disabled?	boolean	Whether the component is disabled. Default false
errorMessage?	string	Optional error message displayed below the field.
firstDayOfWeek?	DayOfWeek	First day of the week displayed in the calendar. Default DayOfWeek.Sunday
firstWeekOfYear?	FirstWeekOfYear	Defines which week is considered the first week of the year. Default FirstWeekOfYear.FirstDay
formatDateTime?	(date) => string	Custom formatter used to display the selected date/time in the field. Replaces the default locale-aware layout.
highlightCurrentMonth?	boolean	Whether the calendar should highlight the current month in the month picker. Default false
highlightSelectedMonth?	boolean	Whether the calendar should highlight the selected month in the month picker. Default true
iconProps?	IIconProps	Icon displayed inside the trigger button. Defaults to Calendar.
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	Whether the month picker is shown beside the day picker or hidden. Default true
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	Step (in minutes) applied by the minutes field. Default 1
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.
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.
openOnClick?	boolean	Whether the popup should open when the user clicks the input. Set to false to only open via the trigger icon. Default true
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.
pickerAriaLabel?	string	Aria label used for the popup (calendar).
placeholder?	string	Placeholder text displayed when the field is empty. Default 'Select date & time...'
required?	boolean	Whether the field is required (adds the Fluent UI required marker). Default false
showCloseButton?	boolean	Whether the calendar day close button should be shown.
showGoToToday?	boolean	Whether the "Go to today" link should be shown in the calendar. Default false
showMonthPickerAsOverlay?	boolean	Show the month picker as an overlay on top of the day picker. Default false
showTime?	boolean	Whether to show the time portion. Default true
showWeekNumbers?	boolean	Whether the calendar should show week numbers before each row. Default false
strings?	ICalendarStrings	Localized strings forwarded to the calendar.
style?	CSSProperties	Inline style applied to the root element.
tabIndex?	number	Tab index applied to the trigger TextField.
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.
textFieldStyles?	IDateTimePickerTextFieldStyles	Custom styles applied to the display TextField.
timeFormat?	TimeFormat	Time format used inside the popup and for the display text. Default TimeFormat.H24
today?	Date	Value used as "today" inside the calendar — defaults to the current machine time when omitted.
tokens?	IDateTimePickerTokens	Customization tokens used to override colors, radius, sizes and animations. Merged on top of the theme derived from appearanceMode.
translate?	(text) => string	Optional localization function. Applied to every built-in label used inside the popup (Time, Now, Clear, Done, ...).
underlined?	boolean	Renders the trigger TextField with the underlined variant. Mirrors Fluent UI DatePicker's underlined. Default false
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).