Material-ui 选择器：如何使用按钮隐藏文本字段和打开模式

Question

我正在使用material-ui 选择器的 3.2.6 版来创建一个在移动设备和桌面设备上以不同方式呈现的组件。

在桌面上，我显示一个带有文本输入的常规内联日期选择器，而对于移动设备，我只想显示一个打开模式的日期图标按钮

据我所知，材料选择器 api 没有隐藏文本字段的道具，并且 DatePickerModal 不是独立组件。

我看到了使用 ref 打开按钮的解决方案，但这似乎适用于旧版本的库，我无法让它工作。 关于如何使用最新版本实现这一目标的任何提示？ 是否有一些道具可以传递给 TextField 组件以隐藏它？

Answer 1

您可以通过传递自定义组件来隐藏文本字段。 它会像

function ControllingProgrammaticallyExample() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedDate, handleDateChange] = useState("2018-01-01T00:00:00.000Z");

  return (
    <div className={classes.container}>
      <Button onClick={() => setIsOpen(true)}> Open picker </Button>

      <DatePicker
        open={isOpen}
        onOpen={() => setIsOpen(true)}
        onClose={() => setIsOpen(false)}
        value={selectedDate}
        onChange={handleDateChange}
        TextFieldComponent={() => null}
      />
    </div>
  );

官方示例： https://material-ui-pickers.dev/guides/controlling-programmatically

Answer 2

只需使用renderInput方法

renderInput={
    hideInput ? 
        ({ inputRef, inputProps, InputProps }) => (
            <Box ref={inputRef}>
                {InputProps?.endAdornment}
            </Box>
        ) : 
        (params => <TextField {...params} />)
}

其中hideInput是 boolean，您可以使用它在视图之间切换。

Answer 3

我没有足够的代表向上面的@stackoverflow 的答案添加评论，但为了支持该答案，这里是关于自定义日期选择器输入组件的官方 MUI 文档的链接

https://mui.com/x/react-date-pickers/date-picker/#custom-input-component