react-datetime: How to set the time to now() from a button

Question

I am using react-datetime

I want the user to easily set the time to current time using a button Immediate. Instead of selecting the current time manually.

I am trying the below

const [currentDateTime, setcurrentDateTime] = useState(null);
<Datetime
    inputProps={{
        placeholder: "MM-DD-YYYY HH:mm",
        required: true,
    }}
    viewMode="time"
    value={currentDateTime} <--- THE PROBLEM WITH THIS IS, IT DOES NOT SET THE SELECTED DATETIME.
/>
<Button color="primary" className="ml-1" onClick={() => setcurrentDateTime(new Date())}>
    {"Immediate"}
</Button>

To use the Immediate button value i am using value={currentDateTime}. BUt this does not allow me to use the selected value

How to do this. Have new Date() value when i pressImmediate button. and have the selected value when i select a datetime

Answer 1

This is happening because you haven't added the onChange event to your Datetime:

const [currentDateTime, setcurrentDateTime] = useState(null);

  return (
    <>
      <Datetime
        inputProps={{
          placeholder: "MM-DD-YYYY HH:mm",
          required: true
        }}
        viewMode="time"
        value={currentDateTime}
        onChange={setcurrentDateTime} // <--- You need to add onChange 
      />
      <Button
        color="primary"
        className="ml-1"
        onClick={() => setcurrentDateTime(new Date())}
      >
        {"Immediate"}
      </Button>
    </>
  );

Checkout this CodeSandbox: