React material UI open datepicker on button click

Question

I am using react material ui for Datepicker .

 <TextField
        id="datetime-local"
        label="Next appointment"
        type="datetime-local"
        defaultValue="2017-05-24T10:30"
        sx={{ width: 250 }}
        InputLabelProps={{
          shrink: true,
        }}
      />

i want to open this date picker on click of a button.

Thanks in advance.

Answer 1

You can achieve this by using the showPicker function on the HTMLInputElement.

Create a ref for the native input element. You can pass the ref down to the input using inputProps.

const inputRef = useRef(null);

const handleClick = () => {
  // check if the ref is set
  if (inputRef.current === null) return;
  inputRef.current.showPicker();
};

return (
  <>
    <TextField
      id="datetime-local"
      label="Next appointment"
      type="datetime-local"
      defaultValue="2017-05-24T10:30"
      sx={{ width: 250 }}
      inputProps={{
        ref: inputRef,
      }}
      InputLabelProps={{
        shrink: true,
      }}
    />
    <button onClick={handleClick}>open datepicker</button>
  </>
);