DateTimePickerProps

DateTimePickerProps = object

Defined in: packages/react/src/ui/datetime/date-picker.tsx:61

Properties

aria-labelledby?

optional aria-labelledby?: string

Defined in: packages/react/src/ui/datetime/date-picker.tsx:148

Points at the id of an external <label>/label-like element that names this trigger — required because a <div role="combobox"> is not an HTML labelable element, so a plain <label htmlFor> cannot compute its accessible name even when id matches.

---

aria-required?

optional aria-required?: boolean

Defined in: packages/react/src/ui/datetime/date-picker.tsx:141

Marks the trigger element as required for assistive technology.

Default

false

---

classNames?

optional classNames?: object

Defined in: packages/react/src/ui/datetime/date-picker.tsx:116

Custom class names for the component.

trigger?

optional trigger?: string

Custom class names for the trigger (the button that opens the picker).

---

clearable?

optional clearable?: boolean

Defined in: packages/react/src/ui/datetime/date-picker.tsx:112

Whether to show the clear button.

Default

false

---

disabled?

optional disabled?: boolean

Defined in: packages/react/src/ui/datetime/date-picker.tsx:97

Whether the datetime picker is disabled.

Default

false

---

hideTime?

optional hideTime?: boolean

Defined in: packages/react/src/ui/datetime/date-picker.tsx:102

Whether to show the time picker.

Default

false

---

id?

optional id?: string

Defined in: packages/react/src/ui/datetime/date-picker.tsx:136

The id attribute applied to the trigger element that opens the picker — pair with an external <label htmlFor> pointing at the same value.

---

max?

optional max?: Date

Defined in: packages/react/src/ui/datetime/date-picker.tsx:85

The maximum datetime value allowed.

---

min?

optional min?: Date

Defined in: packages/react/src/ui/datetime/date-picker.tsx:81

The minimum datetime value allowed.

Default

undefined

---

modal?

optional modal?: boolean

Defined in: packages/react/src/ui/datetime/date-picker.tsx:67

The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers. If you want to use the datetime picker inside a dialog, you should set this to true.

Default

false

---

onBlur?

optional onBlur?: (event) => void

Defined in: packages/react/src/ui/datetime/date-picker.tsx:155

Called when the trigger loses focus — wired to field.handleBlur so TanStack Form’s touched-state tracking works the same way every other field type’s control already does.

Parameters

event

React.FocusEvent<HTMLElement>

Returns

void

---

onChange

onChange: (date) => void

Defined in: packages/react/src/ui/datetime/date-picker.tsx:76

Callback function to handle datetime changes.

Parameters

date

Date | undefined

Returns

void

---

renderTrigger?

optional renderTrigger?: (props) => React.ReactNode

Defined in: packages/react/src/ui/datetime/date-picker.tsx:131

Custom render function for the trigger.

Parameters

props

DateTimeRenderTriggerProps

Returns

React.ReactNode

---

timePicker?

optional timePicker?: object

Defined in: packages/react/src/ui/datetime/date-picker.tsx:122

hour?

optional hour?: boolean

minute?

optional minute?: boolean

second?

optional second?: boolean

---

timezone?

optional timezone?: string

Defined in: packages/react/src/ui/datetime/date-picker.tsx:92

The timezone to display the datetime in, based on the date-fns. For a complete list of valid time zone identifiers, refer to: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

Default

undefined

---

use12HourFormat?

optional use12HourFormat?: boolean

Defined in: packages/react/src/ui/datetime/date-picker.tsx:107

Whether to use 12-hour format.

Default

false

---

value

value: Date | undefined

Defined in: packages/react/src/ui/datetime/date-picker.tsx:71

The datetime value to display and control.