isValid cannot leave field blank

[jshsmth]

Hey Everyone,

Wondering if anyone is able to help out,

I am using the isValid function along with parse and returning either "Date is invalid" or undefined
as part of validation on a date picker field.

But I would like it to not throw an error when the field is left blank as its an optional field.

This is what I got so far.

export const isValidDate = value => value && (!isValid(parse(value, 'dd/MM/yyyy', new Date())) ? 'Date is Invlaid' : undefined)

[fturmel]

Can you give an input example to your function that throws an error? Also, please confirm which version of date-fns you're using.

[jshsmth]

date-fns verison is 1.30.1

Sorry I was not clear,

The function is working, but I have passed the isValidDate as validation in a form, so its working but when the user leaves nothing in the field, it is saying "Date is invalid" because the expression is returning true that it is !isValid

[fturmel]

Just check if the input is empty before passing to parse? Something like this?

import { isValid, parse } from "date-fns";

export const isValidDateOrEmpty = (value) =>
  !value || isValid(parse(value)) ? undefined : "Date is invalid";

console.log(isValidDateOrEmpty("bad input")); // "Date is invalid"

console.log(isValidDateOrEmpty(null)); // undefined
console.log(isValidDateOrEmpty(undefined)); // undefined
console.log(isValidDateOrEmpty("")); // undefined
console.log(isValidDateOrEmpty("04/02/2022")); // undefined

EDIT 1: using v1 syntax

Please reference the v1 version of the docs, the parse function in v1 doesn't support format tokens, it's essentially parseISO from v2: https://date-fns.org/v1.30.1/docs/parse

EDIT 2: slightly better code

[jshsmth]

Thank you for your reply,

I did something similar to this to begin with but I was finding it was allowing invalid date for example, it fixes the blank field but

it would allow 45/45/2025 as a date, are you getting that on your side to?

Any ideas?

[fturmel]

I am not with this specific input, did you try the code sample I shared?

[jshsmth]

Hey, yes I did give it a try

Thank you for the code sample,

it still is allowing invalid dats (ie. 45/45/2025) odd because the logic looks good

[fturmel]

Not sure how else I can help you out, maybe the problem lies elsewhere in your app?

Have a look at the codesandbox I used to troubleshoot this issue, maybe it can help: https://codesandbox.io/s/autumn-dust-k1jh9?file=/src/index.js

If you can come up with an isolated piece of code that can reproduce the issue, I'll have a look again. Good luck!

[jshsmth]

No problems, thank you at at least I know it is probably somewhere else. so thank you for confirming that logic appreciate it