DatetimePicker

Popover body that combines a calendar and a time picker behind two segmented tabs ("Date" / "Time"). Controlled by a single ISO 8601 datetime string.

When to use

Use DatetimePicker when you need the raw picker surface — e.g. inside your own popover or layout. It is a controlled primitive: you own the value/onChange state.

For a ready-made text field with a calendar trigger and popover, use DatetimePickerInput instead.
Internally it renders DatePicker on the date tab and TimePicker on the time tab; selecting a date automatically switches to the time tab.

There is no @uxf/form twin of the bare picker — the form integration lives on @uxf/form/datetime-picker-input.

Usage

import { DatetimePicker } from "@uxf/ui/datetime-picker";
import { useState } from "react";

function Example() {
    const [value, setValue] = useState<string | null>(null);

    return <DatetimePicker onChange={setValue} value={value} />;
}

onChange is called with the selected moment as an ISO 8601 string (via Dayjs.toISOString()), or null when the value is cleared.

Props

Prop	Type	Default	Description
`value`	`string \| null`	— (required)	Current value as an ISO 8601 datetime string, or `null`.
`onChange`	`(value: string \| null, event?) => void`	— (required)	Called with the new value as an ISO 8601 string, or `null`.
`minDate`	`Date`	—	Earliest selectable date.
`maxDate`	`Date`	—	Latest selectable date.
`unavailableDates`	`Date[]`	—	Dates that cannot be selected.
`bottomContent`	`ReactNode`	—	Extra content rendered below the calendar on the date tab.
`onMonthChange`	`(months: MonthType[]) => void`	—	Called when the visible month(s) change. `MonthType` is from `@uxf/datepicker/utils/types`.
`closePopoverHandler`	`() => void`	—	Declared in the props type but not referenced by the component itself (see note below).

Exports

Export	Type	Description
`DatetimePicker`	component	The picker described here.
`OUTPUT_DATETIME_FORMAT`	`"YYYY-MM-DDTHH:mm:ss.SSSZ"`	dayjs format string for the value the picker emits/parses.
`getStrictParsedDatetime`	`(date: string \| null) => Dayjs`	Strictly parses the date portion of a value against `OUTPUT_DATETIME_FORMAT` (returns an invalid `Dayjs` for bad input).

Requirements

Client component ("use client").

Tab labels are read from the uxf-ui-datetime-picker translation namespace bundled with @uxf/ui.

Import the required stylesheets once in your global CSS:

@import url("@uxf/ui/css/datetime-picker.css");
@import url("@uxf/ui/css/tabs.css");
@import url("@uxf/ui/css/date-picker.css");
@import url("@uxf/ui/css/calendar.css");
@import url("@uxf/ui/css/time-picker.css");
@import url("@uxf/ui/css/button.css");
@import url("@uxf/ui/css/icon.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

Default

Open in new tab

When to use

Use DatetimePicker when you need the raw picker surface — e.g. inside your own popover or layout. It is a controlled primitive: you own the value/onChange state.

For a ready-made text field with a calendar trigger and popover, use DatetimePickerInput instead.

Internally it renders DatePicker on the date tab and TimePicker on the time tab; selecting a date automatically switches to the time tab.

There is no @uxf/form twin of the bare picker — the form integration lives on @uxf/form/datetime-picker-input.

Usage

import { DatetimePicker } from "@uxf/ui/datetime-picker";
import { useState } from "react";

function Example() {
    const [value, setValue] = useState<string | null>(null);

    return <DatetimePicker onChange={setValue} value={value} />;
}

onChange is called with the selected moment as an ISO 8601 string (via Dayjs.toISOString()), or null when the value is cleared.

Props

Prop

Type

Default

Description

value

string | null

— (required)

Current value as an ISO 8601 datetime string, or null.

onChange

(value: string | null, event?) => void

— (required)

Called with the new value as an ISO 8601 string, or null.

minDate

Date

—

Earliest selectable date.

maxDate

Date

—

Latest selectable date.

unavailableDates

Date[]

—

Dates that cannot be selected.

bottomContent

ReactNode

—

Extra content rendered below the calendar on the date tab.

onMonthChange

(months: MonthType[]) => void

—

Called when the visible month(s) change. MonthType is from @uxf/datepicker/utils/types.

closePopoverHandler

() => void

—

Declared in the props type but not referenced by the component itself (see note below).

Exports

Export

Type

Description

DatetimePicker

component

The picker described here.

OUTPUT_DATETIME_FORMAT

"YYYY-MM-DDTHH:mm:ss.SSSZ"

dayjs format string for the value the picker emits/parses.

getStrictParsedDatetime

(date: string | null) => Dayjs

Strictly parses the date portion of a value against OUTPUT_DATETIME_FORMAT (returns an invalid Dayjs for bad input).

Requirements

Client component ("use client").

Tab labels are read from the uxf-ui-datetime-picker translation namespace bundled with @uxf/ui.

Import the required stylesheets once in your global CSS:

@import url("@uxf/ui/css/datetime-picker.css");
@import url("@uxf/ui/css/tabs.css");
@import url("@uxf/ui/css/date-picker.css");
@import url("@uxf/ui/css/calendar.css");
@import url("@uxf/ui/css/time-picker.css");
@import url("@uxf/ui/css/button.css");
@import url("@uxf/ui/css/icon.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.