Is there any way to Programmatically hide "AM" from AM/PM dropdown in MUI DesktopTimePicker?

Question

I'm creating a time range and encountered this issue. I want to allow only AM when certain condition is true otherwise both AM/PM should be available

I'm using this https://mui.com/x/api/date-pickers/desktop-time-picker/

Let me know if you guys can help.

Thanks

I've tried disabling the later time but it still shows AM

shouldDisableTime={(timeValue, clockType) => { return clockType === "hours" && new Date(timeValue).getHours() >= 12; }}

Answer 1

found a solution, I've used CSS to hide PM with display:none.

here how I've achieved it:

first I've created a class:

.hide-pm li[aria-label="PM"] {
    display: none;
}

then used this class in popper props.

<DesktopTimePicker
  ampm
  label='closing time'
  slotProps={
   popper: {
     className: ifTrue ? 'hide-pm' : ''
   }
  }
  ...
/>

That's it.

Thanks