如何在常规 css 元素上使用 material ui 日期点击器？

Question

https://codesandbox.io/s/busy-glitter-butkvc?file=/src/App.js:0-977

基本上，我有这个table

  <div className="table">
      <div className="headers">
        <span>column 1</span>
        <span>column 2</span>
        <span>end date</span>
        <span>column 4</span>
        <span>column 5</span>
        <span>column 6</span>
      </div>

      <span>row 1</span>
      <span>row 1</span>
      <span className="date">3/18/2022</span>
      <span>row 1</span>
      <span>row 1</span>
      <span>row 1</span>

      <span>row 1</span>
      <span>row 1</span>
      <span className="date">3/25/2022</span>
      <span>row 1</span>
      <span>row 1</span>
      <span>row 1</span>
    </div>

我想单击日期单元格并打开日期选择器框，让我选择一个日期。我查看了 material ui 并找到了日期选择器，但它似乎只用于文本字段。如果我要单击 span 元素，有什么方法可以实现单击？

类似这样，但不需要开始时间，只需要日期

Answer 1

通过尝试文档中的道具和一些 css

设法解决了这个问题

  const [date, setDate] = React.useState(new Date());
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    console.log(date);
    setOpen(false);
  }, [date]);

  const openDatePicker = () => {
    setOpen(true);
  };

在文本字段上使用道具 open 和 display: none

<LocalizationProvider dateAdapter={AdapterDateFns}>
    <DatePicker
      open={open}
      value={date}
      onChange={(newValue) => setDate(newValue)}
      renderInput={(params) => (
        <TextField {...params} style={{ display: "none" }} />
      )}
    />
</LocalizationProvider>

https://codesandbox.io/s/busy-glitter-butkvc?file=/src/App.js:270-514

但是，最好我希望它像下拉一样，而不是放在一边。不确定 MUI 是否可以做到这一点。

如何在常规 css 元素上使用 material ui 日期点击器？

How do I use material ui date clicker on a regular css element?

reactjs

material-ui