How to Customize MUI Date Picker size for Mobile Screens?

Question

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.

Yash Rakholiya · Accepted Answer · 2024-07-23 11:03:57Z

0

i would like to inform that this mui datepicker is pre-bulid responsive by mui. that is i do in my project enter image description here

so you can check and install second time

answered Jul 23, 2024 at 11:03

Yash Rakholiya

12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TestHau Over a year ago

Hi Yash, can you try with datetime picker? Because what can I see in your project is date only picker. Thanks !

TestHau · Accepted Answer · 2024-07-30 03:04:36Z

0

Below is the solution for my issue.

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

answered Jul 30, 2024 at 3:04

TestHau

831 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to Customize MUI Date Picker size for Mobile Screens?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related