单击文本或图像时如何显示 HTML 输入日期？

Question

当我单击某些文本或图像时，我想弹出一个日期选择器。我正在使用 reactjs。我使用的是 HTMLinput type="date"而不是 React-datepicker 库。

这是我的代码：

    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;

这是代码和框。

我希望日期选择器能够正常工作，而且在单击文本或图像时也能出现。我怎样才能做到这一点？

谢谢你。

Answer 1

您可以通过打开焦点下拉菜单来设法做到这一点。由于单击按钮焦点输入。

以下是具体操作方法

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

检查此答案以获取更多信息