Ant Design Timepicker - get input value onKeyUp

Question

How can I get the value of the Timepicker input as it is typed ? Looked into the documentation and the 2 events are available, onChange and onSelect. Neither of which help solve my need.

Any idea ?

Answer 1

You can do a workaround by wrapping the TimePicker component in div , add onChange on that div and get the TimePicker input value by ref like that:

import { useRef } from "react";
import { TimePicker } from "antd";

const Solution = () => {
  const timeContainerRef = useRef(null);

  const onChange = () => {
    const timeInputValue =
      timeContainerRef.current.firstChild.firstChild.firstChild.value;
    console.log(timeInputValue); //typed info
  };
  return (
    <div onChange={onChange} ref={timeContainerRef}>
      <TimePicker />
    </div>
  );
};