How do I show the HTML input date when clicking text or an image?

Question

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.

Answer 1

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.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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

Answer 2

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

Answer 3

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" />
</>