reactjsmaterial-uidatetimepickermui-x-date-picker

MUI DateTimePicker Input Hour Styling

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

Solution

  • 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.