Quick start

The component is controlled or uncontrolled. Pass value + onChange for controlled use:

import { useState } from "react";
import { DateTimePicker } from "react-smart-datetime";
import "react-smart-datetime/styles.css";

export default function Example() {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <DateTimePicker
      value={date}
      onChange={setDate}
      placeholder="Select date & time"
      showSeconds
    />
  );
}

Uncontrolled

Drop the value/onChange pair and use defaultValue instead — the component manages its own state and still calls onChange when you need to react to changes.

<DateTimePicker defaultValue={new Date()} onChange={(d) => console.log(d)} />

Native form submission

Pass a name to emit a hidden input (ISO string, or start/end for ranges):

<form>
  <DateTimePicker name="appointment" mode="datetime" />
</form>

Next: explore the modes, range selection, and theming.

Uncontrolled

Native form submission

On this page