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,
        }}
      />