无法在 Material UI 日期选择器上显示错误和错误消息

Question

我正在使用 React Material UI

我想在后端计算的某些条件下显示错误。

我使用了 Material UI-datepicker 但无法显示错误

import * as React from 'react';
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DatePicker from '@mui/lab/DatePicker';

const PickupDatePickerComponent = (props) => {

  const [value, setValue] = React.useState(null);

  const handleChange = (newValue)=>{
    setValue(newValue);
  }

  const todayDate = new Date();

  return (
    <LocalizationProvider style={{ width:"100%"}} dateAdapter={AdapterDateFns}>
      <DatePicker
        label="example"
        value={value}
        onChange={handleChange}
        minDate={todayDate}
        renderInput={(params) => <TextField 
          error
          helperText="Your error message" 
          {...params} sx={{ width:"100%" }} 
        />}
        onError={true}
        error
        helperText="Your error message"
      />
    </LocalizationProvider>
  );
}

export default PickupDatePickerComponent

该error属性无法正常工作<Input/>，所以<DatePicker/>边框不会是红色的...（就像正常错误一样）

Answer 1

将错误属性放在 {...params} sx={{ width:"100%" }} 之后，
如下所示

renderInput={(params) => <TextField 
      
      {...params} sx={{ width:"100%" }} 
      error
      helperText="Your error message" 
    />}

Answer 2

如果您使用的是 DatePicker V6，这些解决方案目前不起作用。在新版本中，renderInput 已被 slotProps 取代。请检查下面的代码。

代码：

<Controller
  name={name}
  control={control}
  render={({ field, fieldState: { error } }) => (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        {...field}
        label={label}
        slotProps={{
          textField: {
            fullWidth: fullWidth,
            variant: 'outlined',
            error: !!error,
            helperText: error?.message,
          },
        }}
        {...other}
      />
    </LocalizationProvider>
  )}
/>;

如果您想了解有关此更新的更多详细信息，请查看官方网站上的此链接。