DateTimePicker

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

DateTimePicker API

interface DateTimePickerProps {
  /**
   * Controls the colors and borders of the input.
   *
   * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.
   * @default 'outline'
   */
  appearance?: "outline" | "filled-darker" | "filled-lighter" | "underline" | "filled-darker-shadow" | "filled-lighter-shadow";

  as?: "input";

  /**
   * Input can't have children.
   */
  children?: undefined;

  className?: string;

  /**
   * If set, shows an "x" button once there's a value to act on. If `defaultValue` is set, the
   * button resets the value back to `defaultValue`; otherwise it clears the value entirely.
   */
  clearable?: boolean;

  /**
   * Element after the input text, within the input border
   */
  contentAfter?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Element before the input text, within the input border
   */
  contentBefore?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Initial value for an uncontrolled component.
   */
  defaultValue?: Date;

  /**
   * Collapse the control to its content width when nothing is selected and
   * grow it with the typed/selected content. Only available when `label` is set.
   */
  dynamicWidth?: boolean;

  /**
   * The actual `<input>` element. `type="text"` will be automatically applied unless overridden.
   *
   * This is the "primary" slot, so native props specified directly on the `<Input>` will go here
   * (except `className` and `style`, which go to the `root` slot). The top-level `ref` will
   * also go here.
   */
  input?: ({ as?: "input"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, "children"> & { children?: undefined; }) | undefined;

  /**
   * Optional inline label rendered inside the control, before the value.
   */
  label?: string;

  /**
   * The maximum allowable value.
   */
  max?: Date;

  /**
   * The minimum allowable value.
   */
  min?: Date;

  /**
   * Called when the user changes the value.
   */
  onChange?: ((event: ChangeEvent<HTMLInputElement>, data: DateTimePickerOnChangeData) => void);

  /**
   * Called after every `onChange` with the native constraint-validation result, derived from
   * the input's `ValidityState`, so `min`/`max`/`required`/malformed-input are all covered
   * without re-deriving them from the `Date` value. Pair with `Field`'s `validationState`/
   * `validationMessage` to surface it (Fluent's `Input` already themes `aria-invalid` for you).
   */
  onValidationResult?: ((event: ChangeEvent<HTMLInputElement>, data: DateTimePickerValidationResultData) => void);

  ref?: Ref<HTMLInputElement>;

  /**
   * Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.
   * (A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)
   *
   * The root slot receives the `className` and `style` specified directly on the `<Input>`.
   * All other top-level native props will be applied to the primary slot, `input`.
   */
  root?: NonNullable<WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null> | undefined;

  /**
   * Size of the input (changes the font size and spacing).
   * @default 'medium'
   */
  size?: "small" | "medium" | "large";

  style?: CSSProperties;

  /**
   * Controls text overflow behavior for the value. When true, long text is truncated with an ellipsis.
   */
  truncateTextOverflow?: boolean;

  /**
   * Which native temporal input to render.
   * @default 'date'
   */
  type?: "time" | "date" | "datetime-local" | "month" | "week";

  /**
   * Current value. Provide this for a controlled component; otherwise use `defaultValue`.
   */
  value?: Date | null;
}