[DatePicker] Any way to validate incomplete / invalid dates?

[mryechkin]

We have a requirement where I need to show an error message if a user tries to submit a form with an incomplete (optional) date field. Essentially it needs to mimic the default native behaviour of a date input field:

It seems that the DatePicker doesn't provide the same behaviour for this particular scenario, even though it matches the other constraint validation (ie. min, max, required). I was hoping to be able to do this via validate prop, but if I'm understanding correctly - that only triggers on value change, and if a user blurs out of the field with an incomplete input, the value constrains to valid date? That is, if I'm interpreting @devongovett's comment in this PR correctly.

Any recommendations for how to handle this?

Reference example with both React Aria DatePicker and a native date input:
https://stackblitz.com/edit/adpptivm?file=src%2FExample.tsx

[devongovett]

That's already the behavior I get here when submitting a form when the date is incomplete: https://react-aria.adobe.com/DateField#forms

Did you mean that or something else?

[snowystinger]

isn't that required then? what does it matter if someone touches it or not? how does a keyboard user avoid it if they are navigating through the form and don't want to fill it out?

[mryechkin]

Good point, maybe touched isn't the correct term here.

This was a requirement that came in to us from a product team for one of their forms. Unfortunately I don't have the specifics of the why, but the ask is to be able to show the same kind of validation message as a native input type="date" field for an incomplete date (ie. a user has began filling it out and then moved focus to another field without selecting a complete date).

When using a native input field, that validation looks to be built-in, even when the field is not marked as required - it shows after submitting an incomplete date, but fully empty value is fine and doesn't trigger validation.

I'm curious if this is possible out of the box with the DatePicker in React Aria?

[snowystinger]

I'm not really sure why the native one behaves like this, however, it works the same across Chrome/Firefox/Safari, so it seems like something we should match. But it doesn't look like we support it yet with the native validationBehaviour. Possibly you could do it by using validationBehaviour="aria" and run your own validation, though there may not be enough information without intercepting some of the DateFieldState's context.

Hopefully adding support for it would be as simple as an update to useDateField's onBlurWithin checking if it's partial vs empty vs complete and committing validation for that.

[mryechkin]

Thanks @snowystinger - appreciate you looking into it. That would be a most-welcome update 🙏 Let me know if I should be logging this as a separate issue.

I'd have no problem with doing this validation on my end, but the issue here is that right now there doesn't seem to be a way to tell between an "incomplete" input and just an empty one, as far as I can tell.

[snowystinger]

Being able to tell if you have an incomplete date should now be possible I believe with our PR feat: Support entering invalid dates in DateField and constrain on blur

See this stackblitz and check the "value" inside each segment in the state:
https://stackblitz.com/edit/q47xivbs?file=src%2FDateField.tsx