代码之家 › 专栏 › 技术社区 › Gukkey

在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

tailwind-css reactjs html javascript

Gukkey · 技术社区 · 8 月前

因此,我试图创建一个组件,如果用户单击父分区中的任何位置,该组件将显示典型的日期选择器。但我不想显示日期类型输入。

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

2 回复 | 直到 8 月前

rozsazoltan 8 月前

您可以使用外部事件通过showPicker()方法打开单个输入字段的选择器菜单。

HTMLInputElement: showPicker() method -MDN文档

注:适用于 date , datetime-local , month , time , week 以相同的方式启动。它们不能在这里显示,因为实时示例在跨原点框架中运行,会导致 SecurityError

这在iframe或StackOverflow代码段中不起作用!根据代码创建自己的复制品。我已将结果附在图片中。

如果隐藏日期输入字段( display: none; ),它将无法计算其当前位置。相反,使父div relative .将输入放置在左下角,并设置其 height 和 width 到 0 .

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

Hamza Essolami 8 月前

您可以使用裁判隐藏输入当点击父项时

例如:

import { useRef, useState } from "react";

const DatePicker = () => {
  const dateInputRef = useRef(null);
  const [date, setDate] = useState("");

  const handleClick = () => {
    if (dateInputRef.current) {
      dateInputRef.current.showPicker(); 
    }
  };

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

  return (
    <div className="...">
      <div
        className="..."
        onClick={handleClick}
      >
        <p className="...">{date || "Select a date"}</p>
        <input
          type="date"
          ref={dateInputRef}
          className="hidden"
          onChange={handleDateChange}
        />
      </div>
      <div>...</div>
    </div>
  );
};

export default DatePicker;