How to add helper text in date field in material UI?

Question

This is my component definition:

<DateField
      name={formElement.name}
      type="date"
      label={formElement.name}
      onChange={(date) => formik.setFieldValue(formElement.name, date)}
      value={formik.values[formElement.name] || null}
      onBlur={blurHandler}
      className={classes.flexGrow}
      // defaultValue={dataMatchHandler(formElement.name) || ''}
      minDate={doj}
      maxDate={Date('1/1/2023')}
      error={formik.touched[formElement.name] && Boolean(formik.errors[formElement.name])}
      helperText={formik.touched[formElement.name] && formik.errors[formElement.name]}
/>

Now when the value changes to below minDate error is triggered fine, but I also want to display a helper text, how do I do that?

Answer 1

My suggestion is that you can try using TextField so you can use helperText.

Here is the example you can try:

<TextField
      name={formElement.name}
      type="date"
      label={formElement.name}
      onChange={(date) => formik.setFieldValue(formElement.name, date)}
      value={formik.values[formElement.name] || null}
      onBlur={blurHandler}
      className={classes.flexGrow}
      helperText={formik.touched[formElement.name] && formik.errors[formElement.name]}
    />