Material-ui picker: how to hide text field and open modal with button

Question

I'm using version 3.2.6 of material-ui pickers to create a component that renders differently on mobile and desktop.

On desktop I'm displaying a regular inline datepicker with textinput, and for mobile I only want to display a dateicon button which opens up the modal

From what I can see the material-picker api does not have a prop to hide the textfield, and the DatePickerModal is not a standalone component.

I saw solutions using ref to open the with a button, but that seemed to be for older versions of the library, and I couldn't get it working. Any tips on how this can be achieved with the latest version? Is there some props I can pass down to the TextField component to hide it?

Answer 1

You can hide textfield by passing custom component. It will be like

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>
  );

Official example: https://material-ui-pickers.dev/guides/controlling-programmatically