MUI DateTimePicker Input Hour Styling

Question

In the React MUI Datepicker, how do I remove extra 0, for a Single Hour time?

Right now, its showing an extra 0 here.

Goal is following, 03:00 PM --> 3:00 PM

<LocalizationProvider dateAdapter={AdapterDayjs}>
 <DateTimePickerStyled
 format="MMM DD, YYYY h:mm A" 
 />
</LocalizationProvider>

enter image description here

Answer 1

MUI docs. They require the "shouldRespectLeadingZeros" prop even when supplying a custom format, according to them. Try this:

 <DateTimePicker
 label="Formatted Picker"
 slotProps={{ field: { shouldRespectLeadingZeros: true } }}
 format="MMM DD, YYYY h:mm A"
 />

This worked for me in a codesandbox.