Version: 1.1.0

DateTimePicker

@spartanfx/react / index / DateTimePicker

Variable: DateTimePicker

const DateTimePicker: React.FunctionComponent<IDateTimePickerProps>;

DateTimePicker is an enhanced date picker that lets the user select a full date and a time (hours + minutes). It wraps Fluent UI primitives (Calendar, Callout, TextField) and composes them with a lightweight TimePicker sub-component to provide a seamlessly integrated popup.

The component mirrors the props exposed by Fluent UI's DatePicker (borderless, underlined, highlightSelectedMonth, textField, showGoToToday, firstDayOfWeek, strings, …) and adds a token-based theming layer (tokens + appearanceMode) that is consistent with other SpartanFX components (Rating, RoosterRichText, …).

The onChange callback always returns a Date expressed in the local timezone; seconds and milliseconds are reset to 0.

Example

const [value, setValue] = React.useState<Date | null>(null);

<DateTimePicker
  value={value}
  onChange={setValue}
  label="Meeting time"
  borderless
  highlightSelectedMonth
  timeFormat={TimeFormat.H24}
  minuteStep={5}
  tokens={{ accentColor: '#6b46c1', borderRadius: 8 }}
/>

Variable: DateTimePicker

Example​

Example