Question

我正在使用material-ui pickers的3.2.6版本创建一个组件，该组件在移动设备和台式机上的呈现方式不同。

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

据我所见，material-picker 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

Material-UI Picker：如何隐藏文本字段并使用按钮打开模式

1 个答案: