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