Accepted answer

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 = () => {

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

// Render it
  <Add />,
.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=""></script>
<script src=""></script>
<div id="react"></div>

Check this SO answer for more info


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

Related Query

More Query from same tag