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

user_11932106 0
Viewed 6316

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?

material-ui reactjs javascript
2 Answers

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

user_62521610

Just use the renderInput method

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

where hideInput is boolean you can use to toggle betwen the views.

user_38291740
Related