reactjsmaterial-uimui-x-date-picker

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


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; }}


Solution

  • 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