I'm using react Material UI

I want to show an error on some condition that will calculate on the backend.

I used MUI X Date Picker but I can't show error

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

the error property is not working not in <Input/> nor in <DatePicker/> so the border won't be red... (like normal errors)

I'm using react Material UI

I want to show an error on some condition that will calculate on the backend.

I used MUI X Date Picker but I can't show error

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

the error property is not working not in <Input/> nor in <DatePicker/> so the border won't be red... (like normal errors)

• javascript
• material-ui
• mui-x-date-picker

6 Answers 6

Put error attribute after {...params} sx={{ width:"100%" }}
like this

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

If you are using DatePicker V6, these solutions do not currently work. In the new version, renderInput has been replaced by slotProps. Please check the code below.

Code:

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

If you want more details about this update, please check this link on the official site.

i passed to onError prop a callback function as remended in docs , this is a working demo based on your code.

I couldn't find what Controller is in @Necip Sunmaz's ment, so I just created a state.

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
/>

In the latest MUI (V6) DatePicker, the renderInput has been replaced with slotProps, in which case the same solution (i.e. renderInput...) would look like this:

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

MUI Date Picker V7: If you're using react hook useForm you'll need to set the register function inside the textfield object of the slotProps.

<DatePicker ...
    slotProps={{
     textField: {
      ...register('propertyName'),
      error: !!errors?.propertName?.message,
      helperText: errors?.propertyName?.message
     },
    }}
...  />