能否通过代码隐藏MUI DesktopTimePicker的AM/PM下拉框中的AM选项？

你当前使用的shouldDisableTime方法仅能禁用小时、分钟等时钟单元的选择，但不会影响AM/PM（时段）下拉框的选项展示。要实现特定条件下仅显示AM选项，需要通过自定义时段选择器组件来处理：

方案一：自定义PeriodPicker组件（推荐） #

通过MUI TimePicker的slots属性替换默认的时段选择器，根据条件过滤选项并限制选择：

1. 定义自定义PeriodPicker：

import { PeriodPicker } from '@mui/x-date-pickers/PeriodPicker';

const CustomPeriodPicker = ({ shouldHidePM, ...props }) => {
  // 过滤时段选项，仅保留AM当条件为真时
  const filteredOptions = shouldHidePM ? ['am'] : ['am', 'pm'];

  const handlePeriodChange = (newValue) => {
    // 阻止选择PM当条件为真时
    if (shouldHidePM && newValue === 'pm') return;
    props.onChange(newValue);
  };

  return (
    <PeriodPicker
      {...props}
      options={filteredOptions}
      onChange={handlePeriodChange}
    />
  );
};

2. 在DesktopTimePicker中使用自定义组件：

<DesktopTimePicker
  label="选择时间"
  value={timeValue}
  onChange={handleTimeChange}
  // 继续保留原有禁用下午小时的逻辑
  shouldDisableTime={(timeValue, clockType) => {
    return clockType === "hours" && new Date(timeValue).getHours() >= 12;
  }}
  // 替换时段选择器
  slots={{
    periodPicker: (props) => <CustomPeriodPicker shouldHidePM={yourCondition} {...props} />
  }}
/>

方案二：CSS视觉隐藏（不推荐） #

如果不想自定义组件，可以通过CSS临时隐藏PM选项，但这种方式仅为视觉隐藏，用户仍可通过键盘导航选中PM，仅适合简单场景：

1. 添加CSS样式：

/* 给TimePicker容器添加类名，条件满足时隐藏PM选项 */
.time-picker-hide-pm .MuiPeriodPicker-option:nth-child(2) {
  display: none;
}

2. 在组件中根据条件挂载类名：

<div className={`time-picker-container ${yourCondition ? 'time-picker-hide-pm' : ''}`}>
  <DesktopTimePicker
    // ...其他属性
    shouldDisableTime={(timeValue, clockType) => {
      return clockType === "hours" && new Date(timeValue).getHours() >= 12;
    }}
  />
</div>

注意事项 #

• 确保shouldHidePM的判断逻辑与shouldDisableTime保持一致，避免出现逻辑冲突；
• 优先使用方案一，自定义组件能从交互层面完全限制PM时段的选择，更符合需求场景。

内容的提问来源于stack exchange，提问作者MuhammadHunain