How can I trigger a hidden date input’s picker by clicking its parent div in React?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm building a React component where clicking anywhere in the parent div should display the native date picker, but I don't want the date input to be visible. I've hidden the date input using a CSS class, and now I need a way to trigger its picker when the parent div is clicked.

Here's the code I'm working with:

HTML
<div className="flex flex-row gap-3">
    <div className="p-3 ... rounded bg-white cursor-pointer">
        <p className="font-normal text-sm ...">{date}</p>
        <input type="date" className="hidden" />
    </div>
    <div>{...}</div>
</div>

Any guidance on how to programmatically open the date picker from the parent element would be appreciated.

Comments 0

•

Answers 3

•

3 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

Below is an example of how you can trigger the date picker by programmatically clicking on a hidden input. In this example, we use React's useRef to reference the hidden date input and attach an onClick event to the parent div to trigger the input's click event.

JSX
import React, { useRef, useState } from 'react';

const DatePickerComponent = () => {
  const dateInputRef = useRef(null);
  const [date, setDate] = useState('Select Date');

  const handleParentClick = () => {
    if (dateInputRef.current) {
      dateInputRef.current.click();
    }
  };

  const handleDateChange = (event) => {
    setDate(event.target.value);
  };

  return (
    <div className="flex flex-row gap-3">
      <div 
        className="p-3 rounded bg-white cursor-pointer"
        onClick={handleParentClick}
      >
        <p className="font-normal text-sm">{date}</p>
        <input 
          type="date" 
          ref={dateInputRef}
          className="hidden" 
          onChange={handleDateChange} 
        />
      </div>
      <div>{/* Other content */}</div>
    </div>
  );
};

export default DatePickerComponent;

Explanation

useRef Hook:
We create a reference (dateInputRef) for the hidden input so we can programmatically trigger its click event.
handleParentClick:
This function is called when the parent div is clicked, and it triggers the click event on the hidden input, causing the browser's date picker to open.
handleDateChange:
Once a date is selected, we update the component state with the new date value.
Hidden Input Styling:
The input is hidden using a CSS class (here, "hidden"), so it won't be visible to the user but can still be activated programmatically.

This approach ensures that clicking anywhere in the parent div will display the date picker without showing the default date input element itself.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by QuantumMariner450 • 1 month ago

You can open the picker menu of individual input fields with the showPicker() method using an external event.

HTMLInputElement: showPicker() method - MDN Docs

Note: Pickers for date, datetime-local, month, time, week are launched in the same way. They cannot be shown here because live examples run in a cross-origin frame, and would cause a SecurityError

This does not work in an iframe or in the StackOverflow CodeSnippet! Create your own reproduction based on the code. I have attached the result in the image.

If you hide the date input field (display: none;), it won't be able to calculate its current position. Instead, make the parent div relative. Position the input in the bottom left corner, and set its height and width to 0.

JAVASCRIPT
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.25.6/babel.min.js"></script>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<div id="root"></div>

<script type="text/babel" data-presets="env,react">
const { useState, useRef } = React;

function DatePickerComponent() {
  const [date, setDate] = useState("");
  const inputRef = useRef(null);

  const handleDateOverlay = () => {
    inputRef.current?.showPicker();
  };

  const handleDateChange = (e) => {
    setDate(e.target.value);
  };

  return (
    <div className="space-x-4 p-4">
      <div
        class="relative cursor-pointer"
        onClick={handleDateOverlay}
      >
        <span className="text-3xl">📅</span>
        <span className="text-lg">{date}</span>
        <input
          ref={inputRef}
          type="date"
          value={date}
          onChange={handleDateChange}
          className="w-0 h-0 absolute bottom-0 left-0 -z-10"
        />
      </div>
    </div>
  );
}

ReactDOM.render(<DatePickerComponent />, document.getElementById('root'));
</script>

No comments yet.

Answer by VenusianScholar827 • 1 month ago

You can use ref to hide input when click on parent<NL><NL>for example :<NL><NL>javascript\<NL\>import { useRef, useState } from "react";\<NL\>\<NL\>const DatePicker = () => {\<NL\> const dateInputRef = useRef(null);\<NL\> const [date, setDate] = useState("");\<NL\>\<NL\> const handleClick = () => {\<NL\> if (dateInputRef.current) {\<NL\> dateInputRef.current.showPicker(); \<NL\> }\<NL\> };\<NL\>\<NL\> const handleDateChange = (e) => {\<NL\> setDate(e.target.value);\<NL\> };\<NL\>\<NL\> return (\<NL\> <div className="..."><\<NL\> <div<\<NL\> className="..."<\<NL\> onClick={handleClick}<\<NL\> ><\<NL\> <p className="...">{date || "Select a date"}</p><\<NL\> <input<\<NL\> type="date"<\<NL\> ref={dateInputRef}<\<NL\> className="hidden"<\<NL\> onChange={handleDateChange}<\<NL\> /><\<NL\> </div><\<NL\> <div>...</div><\<NL\> </div><\<NL\> );\<NL\>};\<NL\>\<NL\>export default DatePicker;\<NL\>\<NL\>

No comments yet.

Discussion

No comments yet.

How can I trigger a hidden date input’s picker by clicking its parent div in React?

3 Answers

Explanation

Discussion

Similar Posts

How to trigger a hidden date input's picker on parent div click in React?