I want to pop up a date picker when I click some text or an image. I am using reactjs. I'm using the HTML input type="date" not the React-datepicker library.

Here is my code:

    import { useRef } from "react";
    const add = () => {
      const interviewDateRef = useRef();
      const handleInterviewDateClick = () => {
        interviewDateRef.current.focus();
      };
    
      return (
        <>
          <button onClick={handleInterviewDateClick}>Change Date</button>
          <input type="date" ref={interviewDateRef} className="hidden" />
        </>
      );
    };
    export default add;

Here is the codesandbox.

I want the date picker to work normally, but also to appear when clicking on text or an image. How can I do that?

Thank you.

I want to pop up a date picker when I click some text or an image. I am using reactjs. I'm using the HTML input type="date" not the React-datepicker library.

Here is my code:

    import { useRef } from "react";
    const add = () => {
      const interviewDateRef = useRef();
      const handleInterviewDateClick = () => {
        interviewDateRef.current.focus();
      };
    
      return (
        <>
          <button onClick={handleInterviewDateClick}>Change Date</button>
          <input type="date" ref={interviewDateRef} className="hidden" />
        </>
      );
    };
    export default add;

Here is the codesandbox.

I want the date picker to work normally, but also to appear when clicking on text or an image. How can I do that?

Thank you.

• javascript
• html
• reactjs

• i'm not using react datepicker. just html input date basic – Gerry Commented Aug 21, 2021 at 14:51

4 Answers 4

You can manage to do this by opening the dropdown on focus. Since clicking the button focus the input.

Here is how to do so

// Get a hook function
const {useRef} = React;

const Add = () => {
  const interviewDateRef = useRef();
  const handleInterviewDateClick = () => {
    interviewDateRef.current.focus();
  };

  return (
    <div>
      <button onClick={handleInterviewDateClick}>Change Date</button>
      <input type="date" ref={interviewDateRef} className="hidden" />
    </div>
  );
};

// Render it
ReactDOM.render(
  <Add />,
  document.getElementById("react")
);

.input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    position: relative;
    width: 100%;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

<script src="https://cdnjs.cloudflare./ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Check this SO answer for more info

The other answers didn't work for me, the one which worked is this one:

interviewDateRef.current.showPicker();

you just have to call showPicker() function instead of focus()

I think there is no need of react JS if you are using input type date then there automatically when you click on it, it pop up is the date a picker window you can edit it with CSS

The label element may do exactly what you are looking for without any extra javascript. As long as the label's for (htmlFor in React) is linked to the input's id or the input is nested in the label it should open the calendar. There may be some cross-browser differences here though.

<>
  <label htmlFor="input-id">Change Date</button>
  <input id="input-id" type="date" />
</>