如何打开React材料日期选择器,而不显示日期文本字段。

huangapple go评论81阅读模式
英文:

How to open react material date picker without showing date text field

问题

I am using react material (MUI-X) date picker and my requirement is to open the date picker on button click.但我不想显示日期选择器的日期文本字段,只显示日历并选择日期。我尝试了多种解决方案,如自定义渲染文本字段和文本字段中的slotProps,但无法实现这种行为。有没有办法实现这个需求?我正在使用@mui/x-date-picker和它的最新版本。

I tried static date picker but I want modal kind of behavior.在非常高的层面上...我不想要文本字段。

英文:

I am using react material (MUI-X) date picker and my requirement os to open date picker on button click.But I do not want to show date text field of date picker, just show calender and select date.
I tried with multiple solutions like custom render text field and slotProps in text field but could not achieve this beahviour. Any idea how to achieve this
I ma using @mui/x-date-picker and its latest version

I tried statis date picker but i want modal kind of behaviour. At very high level...I do not want text field

答案1

得分: 2

如果你只想显示日期选择器,似乎StaticDatePicker满足你的需求,如果你希望它像其他版本一样弹出,你需要加入一个Popover

export default function DatePickerPopOver() {
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
    null
  );

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <div>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        日期选择器
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
      >
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <StaticDatePicker defaultValue={dayjs("2022-04-17")} />
        </LocalizationProvider>
      </Popover>
    </div>
  );
}
英文:

If all you want is to display the date picker, it seems that the StaticDatePicker satisfies your needs, and if you want it to pop up like the other versions you need to incorporate a Popover

export default function DatePickerPopOver() {
  const [anchorEl, setAnchorEl] = React.useState&lt;HTMLButtonElement | null&gt;(
    null
  );

  const handleClick = (event: React.MouseEvent&lt;HTMLButtonElement&gt;) =&gt; {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () =&gt; {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? &quot;simple-popover&quot; : undefined;

  return (
    &lt;div&gt;
      &lt;Button aria-describedby={id} variant=&quot;contained&quot; onClick={handleClick}&gt;
        Date Picker
      &lt;/Button&gt;
      &lt;Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: &quot;bottom&quot;,
          horizontal: &quot;left&quot;
        }}
      &gt;
        &lt;LocalizationProvider dateAdapter={AdapterDayjs}&gt;
          &lt;StaticDatePicker defaultValue={dayjs(&quot;2022-04-17&quot;)} /&gt;
        &lt;/LocalizationProvider&gt;
      &lt;/Popover&gt;
    &lt;/div&gt;
  );
}

huangapple
  • 本文由 发表于 2023年6月4日 22:59:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76401007.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定