DateTimePicker

Chooses a day and a time in one popup. Use it where the two together make a single moment: a scheduled send, a publish time.

import { DateTimePicker } from 'neba';

<DateTimePicker label="Publish at" placeholder="Pick a moment" minuteStep={15} clearable />;

Props

Prop	Type	Default	Description
variantshared	'solid' | 'outline' | 'text'	'outline'	Weight of the surface: filled, hairline, or none
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Height and type scale
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. Arbitrary colour values are not accepted
densityshared	'default' | 'compact'	'default'	Padding only: never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. 0 means no shadow at all
value	Date | null	—	The chosen moment. Use with onValueChange for a controlled picker
defaultValue	Date | null	—	The initial value, for an uncontrolled picker
onValueChange	(value: Date | null) => void	—	Called when the chosen moment changes
defaultMonth	Date	—	Which month the calendar opens on when there is no value. Defaults to this one
minDate	Date | null	—	The earliest moment that may be chosen. Unlike DatePicker's this is read at full precision: the day stays selectable in the calendar and the clock blocks the hours before it
maxDate	Date | null	—	The other end of the same span
shouldDisableDate	(date: Date) => boolean	—	Blocks individual cells inside the range: weekends, holidays, a room already booked. The cell stays in the grid, unavailable, and the callback is handed the value that cell would produce
weekStartsOnshared	0 | 1 | 2 | 3 | 4 | 5 | 6	—	Which day the week starts on, Sunday being 0. Defaults to whatever the locale says
hour12	boolean	—	A 12-hour dial with an AM/PM column. Defaults to whatever the locale does
showSeconds	boolean	false	Adds the seconds column
hourStep	number	1	How far apart the rows of the hour column are
minuteStep	number	1	The same, for minutes
secondStep	number	1	The same, for seconds
shouldDisableTime	(value: Date, unit: 'hour' | 'minute' | 'second' | 'meridiem') => boolean	—	Blocks individual rows. Called once per row per column with the instant that row would produce and the column it is in
showNowButton	boolean	true	Offers the shortcut to this moment in the footer
open	boolean	—	Whether the popup is open. Use with onOpenChange for a controlled one
defaultOpen	boolean	false	Whether it starts open
onOpenChange	(open: boolean) => void	—	Called when the popup opens or closes
locale	string	—	BCP 47 tag deciding the month and weekday names, the order of the header's two buttons, and how the trigger writes the value. Defaults to the browser's
format	Intl.DateTimeFormatOptions	—	How the trigger writes the value. Passed straight to Intl
placeholder	ReactNode	—	Shown in the trigger while nothing is chosen
clearable	boolean	false	Offers the × that empties the control
closeOnSelect	boolean	false	Closes the popup as soon as a day is chosen. A moment is a day *and* a time, so closing on the first of the two would leave the second unanswered
labels	Partial<PickerLabels>	—	The strings a screen reader hears. One object rather than twenty props, because they are a set: they default to the locale’s wording, and the date names are not among them, those come from Intl
name	string	—	Identifies the field when a form is submitted, as YYYY-MM-DDTHH:MM. Local, not UTC
fullWidth	boolean	false	Stretches to the width of the container
label	ReactNode	—	The label, wired to the control by Base UI's Field
description	ReactNode	—	Helper text
error	ReactNode	—	Error message. Its presence turns the control invalid and re-points the colour family at danger
invalid	boolean	!!error	Forces the invalid state without a message, for when a form library owns validity
readOnly	boolean	false	Shown but not changeable. Keeps its colour and edge, drains the saturation
disabled	boolean	false	Unavailable. Drops the colour family for neutral grey

Native <div> attributes pass through to the root. Only color, defaultValue and children are excluded, since the table above spells them differently.

The calendar props behave as they do on DatePicker and the clock props as they do on TimePicker. The calendar and the clock sit side by side at the same height.

closeOnSelect defaults to false and the footer carries a Done button, since two answers have to be given before the popup can close.

Choosing a day leaves the time alone, and choosing a time leaves the day alone, so the two can be picked in either order.

Examples

minDate · maxDate

The bounds are read at full precision, not just to the day. A minDate of 09:30 on the 27th leaves the 27th selectable in the calendar and greys out only the times before 09:30 in the clock; on any later day nothing is blocked.

That is what a rule like "no earlier than now" needs.

import { DateTimePicker } from 'neba';

/** Now, to the minute — the ordinary "you cannot schedule into the past" rule. */
const now = new Date();

export default function DateTimePickerBounds() {
  return (
    <div className="flex flex-wrap items-end gap-4">
      <DateTimePicker
        label="Not before now"
        placeholder="Pick a moment"
        minDate={now}
        minuteStep={5}
        description="Today stays selectable; the hours already gone do not."
      />
      <DateTimePicker
        label="24-hour, with seconds"
        placeholder="Pick a moment"
        hour12={false}
        showSeconds
        secondStep={10}
      />
    </div>
  );
}

What the trigger shows

The trigger wears the calendar glyph and not the clock. The value is written as one string with Intl, combining the date and the time.

Accessibility

• The calendar is a role="grid" and the clock a set of role="listbox" columns. See DatePicker and TimePicker for the details.
• The trigger's accessible name reads as one sentence covering both halves.