无法在 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

将 error 属性放在后面 {...参数} sx={{ 宽度:"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>
  )}
/>;

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

Answer 3

我按照docs中的建议向 onError prop 传递了一个回调函数，这是一个基于您的代码的工作演示。

Answer 4

我在 @Necip Sunmaz 的评论中找不到

Controller

是什么，所以我只是创建了一个状态。

const [dateError, setDateError] = useState(undefined);

<DateTimePicker
  slotProps={{
    textField: {
      error: !!dateError,
      helperText: dateError,
    },
  }}
  onError={(err) => setDateError(err)}
  minDateTime={filter.date.startDate} // some other date state to cause the error
/>

Answer 5

在最新的 MUI (V6) DatePicker 中，

renderInput

已替换为

slotProps

，在这种情况下，相同的解决方案（即

renderInput

...）将如下所示：

<DatePicker ...
           slotProps={{
             textField: {
               helperText: isError?"Some error message":""
               error: isError,
             },
           }}
...  />