date_after with target node argument

[paulhaem]

Similar to confirm the date_after validation should support target nodes. It's quite a common case to have date ranges, where one date input needs to be after another date input. Currently there are only workarounds to solve this problem with supporting reactiviy and bi-directional value updates.

Looking forward to your thoughts on this idea.

[apena94]

Im experiencing a similar issue, and its shocking how such a common scenario is not being addressed by formkit.

Out of curiousity, what is your current work around? I basically have 2 fields, and always want to ensure the end date is after the start date. The trouble comes if one field had the error message, updating the other field doesnt refresh the validation of the dependent field(I.E, if end date has the error message.. updating start date value to be before end date wont reset end dates validation).

[paulhaem]

I am using this workaround right now:

Field B:
:validation="`date_after:${dateTimeA}`"

You can either use v-model or reference the node from field A (nodeA?.context.value), whatever suits you better. When using the second method you would need to set the nodeA using @node on field A.

[justin-schroeder]

@paulhaem what would your suggest api be?

[apena94]

That is what i am currently doing.. that works if the user fixes the field throwing the error(e.g, end date says it should be after start date -> user updates end date to get rid of error).

The issue lies when a user tries to update start date, when end date is throwing the error(or vice versa). How can i retrigger another fields validation or reset just the 2 dependent fields validation(while not clearing out the entire forms validation)?

[paulhaem]

I would suggest something similar to confirm: date_after:startTime for example. If this field exists it will use its value, otherwise it will try to parse the value as Date. Or what did you mean with API?

[apena94]

So interestingly enough, i found a good solution.. but i dont understand how it works. Effectively, all i did was wrap the logic of the function with a check for the parent node. I based off of a solution in the Formkit docs titled "Multi-input validation rules".

This function is then passed in as a validation function to each of the dependent fields in the template, in my case the start date and end date inputs. I marked the 2 changes with 'NEW ADDITION' comments

@justin-schroeder by any chance could you explain why this works?

`function validateDates(node) {
const parent = node.at('$parent') // NEW ADDITION
let isValid = true;
if (parent.value) { // NEW ADDITION
const { startDate, endDate } = formRef?.node?.value;
if (startDate && endDate) {
const formatStartDate = new Date(startDate);
const formatEndDate = new Date(endDate);
// make sure its not the same day so we can put in the same value for month and year.
formatEndDate.setDate(24);
formatStartDate.setDate(1);
isValid = isBefore(formatStartDate, formatEndDate); // startDate is before endDate
}
}

return isValid;`

[apena94]

^hope that helps you too @paulhaem

[paulhaem]

Just have a look here: https://github.com/orgs/formkit/discussions/1122#discussioncomment-8157505

[russo97]

hi guys, I'm facing the same issue described here.. there are some plan to implement this feature?