DateTimePicker

DateTimePicker combines a Fluent UI calendar with optional time selection. Popup edits (date, time, AM/PM, Now, Clear) build an internal draft; the parent is notified once via onChange when the user presses Done — so you're not flooded with intermediate updates. When showTime is off, selecting a date commits immediately.

When to use

• Capture a date, or a date + time, with a single field.
• Forms needing min/max bounds, optional text entry, and localized calendars.

Import

import { DateTimePicker } from '@spartanfx/react';

Basic usage

onChange is the only required prop. It fires with a local-timezone Date when the value is committed.

function Example() {
  const [when, setWhen] = React.useState<Date | undefined>();
  return (
    <DateTimePicker
      label="Due date"
      value={when}
      onChange={setWhen}
      showTime
    />
  );
}

Date only

Omit showTime to select a date that commits on click (no Done step):

<DateTimePicker label="Start date" value={date} onChange={setDate} />

Bounds, text input, and clearing

<DateTimePicker
  label="Appointment"
  value={value}
  onChange={setValue}
  showTime
  minDate={new Date()}
  maxDate={maxBookingDate}
  minuteStep={15}
  allowTextInput
  allowClear
  required
  errorMessage={error}
/>

Key props

Prop	Type	Default	Notes
onChange (required)	(date) => void	—	Fires when the value is committed.
value	Date	—	Controlled current value.
showTime	boolean	—	Include time selection (adds the Done step).
minDate / maxDate	Date	—	Selectable bounds (time ignored).
minuteStep	number	1	Minutes increment.
allowTextInput	boolean	false	Allow typing into the field.
allowClear	boolean	true	Show a clear button.
required / errorMessage	boolean / string	—	Form validation display.
label / placeholder	string	—	Field label and placeholder.

See the full generated reference: DateTimePicker API ↗.

See also

• Components overview