(feat) Enhance User Experience with MUI Datepicker

[icrc-jofrancisco]

Requirements

• This PR has a title that briefly describes the work done, including the ticket number if there is a ticket.
• My work conforms to the OpenMRS 3.0 Styleguide.
• My work includes tests or is validated by existing tests.

Summary

This PR addresses user feedback regarding the usability of datepicker switch buttons, particularly on small devices. By switching to MUI's datepicker provider, we improve user-friendliness by offering larger, more accessible buttons for switching dates.
Although switching to MUI's datepicker, we maintain a similar visual style while significantly improving usability.
This change ensures a smoother navigation experience, especially on mobile devices, and aligns with our commitment to enhancing usability across our application.

Key Advantages:

• Larger, more accessible switch buttons for improved usability
• Enhanced user experience on small devices

Screenshots

Before:

After:

Related Issue

Other

CC: @ibacher

[IamSAL]

Adding a whole new design system library like MUI for one feature is not recommended, as it'll increase the bundle size.

also using multiple design systems can lead to inconsistent look on the overall UI. The project already has 'carbondesignsystem' installed.

is there any way to customize the existing date picker without introducing new library?

[IamSAL]

Adding a whole new design system library lik MUI for one feature is not recommended, as it'll increase the bundle size.

also using multiple design systems can lead to inconsistent look on the overall UI. The project already has 'carbondesignsystem' installed.

[icrc-jofrancisco]

Thanks @IamSAL . I fully understand your point! I don't think there's much of a solution that differs from this one, because the dote picker needs the style that's only in these packages. any suggestions?

Thanks,