如何移除Material-UI Date/TimePicker的日历图标并保留原有校验功能

你只需要给KeyboardDatePicker组件新增keyboardIcon={null}属性，即可直接隐藏日历图标，该操作不会改动组件的核心逻辑，原有校验功能完全不受影响。

修改后的代码如下：

<KeyboardDatePicker
  style={{ margin: 0, marginRight: '12px' }}
  minDate={defaultValues.id ? undefined : Date.now()}
  disableToolbar
  inputVariant='outlined'
  variant='inline'
  margin='normal'
  fullWidth
  format='yyyy/MM/dd'
  value={watch('date')}
  onChange={value => setValue('date', value)}
  {/* 新增以下属性隐藏日历图标 */}
  keyboardIcon={null}
/>

如果你使用的是较旧版本的Material-UI，上述属性不生效，可以改用InputProps配置移除尾部图标：

<KeyboardDatePicker
  style={{ margin: 0, marginRight: '12px' }}
  minDate={defaultValues.id ? undefined : Date.now()}
  disableToolbar
  inputVariant='outlined'
  variant='inline'
  margin='normal'
  fullWidth
  format='yyyy/MM/dd'
  value={watch('date')}
  onChange={value => setValue('date', value)}
  InputProps={{
    endAdornment: null
  }}
/>

两种方案都仅移除了日历图标的渲染，组件内置的日期格式校验、可选范围校验、值双向绑定等逻辑完全保留，不会对原有功能产生影响。

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