[question] Displaying error message with custom logic on a DateTimePicker

[parvusville]

Order ID 💳

51665

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

I haven't been able to figure out how can I display errors with my own custom logic with DateTimePicker. I am using Formik for Validation, and would like to show errors from there on my DateTimePicker. In the docs (https://mui.com/x/api/date-pickers/date-time-picker/) I only see a reference to "onError" function, which links to this outdated guide on form integration and error displaying. https://next.material-ui-pickers.dev/guides/forms

In the below codesandbox example I try to illustrate what I'm trying to accomplish. As an example Return should not be before Start. Here I've got two problems:

1. After selecting a date, the TextField doesn't blur, is it possible? Currently this is what I use to determine if an error should be shown or not.
2. Forcing validate on everything by submitting we can see that the error message is displayed, but the TextField is not in an error state. https://codesandbox.io/s/magical-chihiro-sik6sf?file=/src/App.js

TLDR; I need to show the TextField on my DateTimePicker in error state with my own custom logic. Is this possible?

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[flaviendelangle]

Hi,

We are already passing an error prop to the TextField If you want to override it, you need to pass your own after ...params

            renderInput={(params) => (
              <TextField
                fullWidth
                helperText={
                  formik.touched.returnTime && formik.errors.returnTime
                }
                onBlur={formik.handleBlur}
                {...params}
                error={formik.touched.returnTime && !!formik.errors.returnTime}
              />

I hope this solves your problem

---

We plan to create a new doc page for the integration into forms, this is tracked in https://github.com/mui/mui-x/issues/4320

[parvusville]

Right of course, thanks @flaviendelangle ! This solves the error displaying part, but do you have any input or recommendations for the blur part?

[flaviendelangle]

Not sure to understand what you mean by "does not blur". Do you expect onBlur to be called ?

[parvusville]

@flaviendelangle Yes, that is what I would want here. Similarly to how normal TextFields work, when I focus one and move the focus away, the field is "touched". This does not seem to be case with TextFields inside the date pickers.

[flaviendelangle]

You should be able to listen to the onClose event

[parvusville]

Thanks, I was able to do what I wanted using both onClose on DateTimePicker and onBlur on the rendered TextField.