I am currently utilizing React Material UI
There is a need to display an error based on certain conditions that will be calculated on the backend.
Although I have implemented Material UI date picker, I am facing issues with displaying errors.
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 seems to be ineffective in both, <Input/> and <DatePicker/>, leading to no red border for the errors as expected.