reactjsmaterial-uidatepickerdatetimepicker

How to Customize MUI Date Picker size for Mobile Screens?

enter image description here I am using the DesktopDateTimePicker component from Material-UI (MUI) in my React application. This component is designed for desktop use, and it does not fit well on mobile screens.

I would like to customize the DesktopDateTimePicker to make it more mobile-friendly or use a different component that is better suited for mobile devices. Specifically, I need to adjust the size and layout of the picker UI so that it fits well on smaller screens.

Solution

  • Below is the solution for my issue.

      <DateTimePicker
    label="Select date and time"
    viewRenderers={{
      hours: renderMultiSectionDigitalClockTimeView,
      minutes: renderMultiSectionDigitalClockTimeView,
      seconds: renderMultiSectionDigitalClockTimeView,
    }}
  />