How to open HTML date input interface with react ref?-CodePudding

I have a date input element that I want to open it's interface programmatically with React refs. Implementation provided blow didn't work.


function myComponent() {
  const dateRef = useRef(null);
  return (
    <>
      <input type="date" ref={dateRef} />;
      <button
        onClick={() => {
          dateRef.current.click();
        }}
      >
        Open Date Interface
      </button>
    </>
  );
}

Here, when I click the button I want to open date picker interface. How can I achieve this?

CodePudding user response：

That was close, you can just modify the click() method into showPicker()

function myComponent() {
  const dateRef = useRef(null);
  return (
    <>
      <input type="date" ref={dateRef} />;
      <button
        onClick={() => {
          dateRef.current.showPicker();
        }}
      >
        Open Date Interface
      </button>
    </>
  );
}

CodePudding user response：

To open the date picker interface programmatically with React refs, you can use the open method of the HTMLInputElement object that is returned by the current property of the RefObject instance.

In your code, you can modify the onClick handler of the button element to call the open method of the dateRef.current object, like this:

function myComponent() {
  const dateRef = useRef(null);
  return (
    <>
      <input type="date" ref={dateRef} />;
      <button
        onClick={() => {
          dateRef.current.open();
        }}
      >
        Open Date Interface
      </button>
    </>
  );
}

With this change, when you click the button, the date picker interface will open, allowing the user to select a date.

Note that the open method is not supported in all browsers, so your code may not work as expected in some cases. You can check the compatibility of the open method on Can I Use to determine if it is supported in the browsers you need to support.