如何以编程方式打开按钮@material-ui/core 本机文本字段类型日期对话框？

Question

如何使用按钮以编程方式打开此@material-ui/core 原生文本字段类型日期对话框的对话框？

我已经调查过了从“@material-ui/pickers”导入{DatePicker} 并认为它对我的应用程序来说太过分了，我在那里也遇到了一些问题

import { TextField } from "@material-ui/core"

<TextField type="date" defaultValue="2017-05-24"/> //how to open this programmatically
<Button onClick={() => {}}>Button That Opens The Date Dialog</Button>

我正在使用

"react": "^17.0.2",
"@material-ui/core": "^4.12.3",

感谢您的帮助

Answer 1

我会通过操纵状态来做到这一点，这样按钮就会改变一些布尔值，然后触发对话打开。因此，更清楚一点，在状态中设置一些值，例如 dateOpened，最初设置为 false。让按钮中的 onClick 将此值更新为相反的值，一开始是这样。然后有一个基于 dateOpened 的值显示的 TextField。

const [dateOpened, setDateOpened] = useState(false);
return (
  <Button onClick={() => setDateOpened(() => (dateOpened ? false : true))}/>
    {
      dateOpened ? <TextField type="date" defaultValue="2017-05-24"/> : <div>Date not opened!</div>
    }
  }
);

那个？如果您以前没有遇到过，则运算符是有条件的。然后，如果您再次单击该按钮，它将隐藏 TextField，因为 onClick 会将 dateOpened 从 true 改回 false。

Answer 2

经过进一步挖掘，似乎无法触发本机输入类型日期对话框

How to trigger mouse click event on react component to open date picker

但是可以从从“@material-ui/pickers”

导入 { DatePicker }

基于t.smith答案的组合解决方案谢谢

{!record.trash && (
  <Tooltip arrow title="Calendar">
    <Button
      disabled={record.trash}
      onClick={() => {
        setShow({
          ...show,
          ["datepicker_" + record.id]: true,
        })
      }}
    >
      <CalendarTodayIcon />
    </Button>
  </Tooltip>
)}
{show["datepicker_" + record.id] && (
  <DatePicker
    value={record.date}
    hidden={true}
    open={true}
    onChange={async (d) => {
      await updateRecord({
        ...record,
        date: d.toISOString(),
      })
    }}
    onClose={() => {
      setShow({
        ...show,
        ["datepicker_" + record.id]: false,
      })
    }}
  ></DatePicker>
)}

如何以编程方式打开按钮@material-ui/core 本机文本字段类型日期对话框？

How to programmatically open with button @material-ui/core native textfield type date dialog?

dialog

datepicker

textfield

reactjs

material-ui