I using Yup with react-hook-form and have the following schema in Yup

  const validationSchema = Yup.object({
    installation: Yup.string().nullable().required("Required"),
    from_date: Yup.date()
      .max(new Date(), "Cannot use future date")
      .nullable()
      .required("Required"),
    to_date: Yup.date()
      .min(Yup.ref("from_date"), "To Date cannot be before From Date")
      .max(new Date(), "Cannot use future date")
      .nullable()
      .required("Required")
  });

When I type the date in the inputs, the validation is working perfectly but the date is being returned in the format 2021-03-31T18:30:00.000Z, however I want the date to be returned just as 2021-03-31.

I am sending the data to a Django backend server and that expects just a DateField without the timezone. How should I do this?

Is there any way to convert the date without the timezone. I can get it working if I use Yup.string() instead, but then the necessary validation would not work.

Possible Solution Idea (But need help to understand how to do it)

Can I write some custom validation in Yup. If that is possible then i could use Yup.string() and still perform the necessary validation

1. Use Yup.string()
2. Convert to date
3. Perform the necessary validation
4. Reconvert date to string
5. And return string

P.S This question has had many views but no significant ments or answers. Can I change the question formatting to make it more understandable?

I using Yup with react-hook-form and have the following schema in Yup

  const validationSchema = Yup.object({
    installation: Yup.string().nullable().required("Required"),
    from_date: Yup.date()
      .max(new Date(), "Cannot use future date")
      .nullable()
      .required("Required"),
    to_date: Yup.date()
      .min(Yup.ref("from_date"), "To Date cannot be before From Date")
      .max(new Date(), "Cannot use future date")
      .nullable()
      .required("Required")
  });

When I type the date in the inputs, the validation is working perfectly but the date is being returned in the format 2021-03-31T18:30:00.000Z, however I want the date to be returned just as 2021-03-31.

I am sending the data to a Django backend server and that expects just a DateField without the timezone. How should I do this?

Is there any way to convert the date without the timezone. I can get it working if I use Yup.string() instead, but then the necessary validation would not work.

Possible Solution Idea (But need help to understand how to do it)

Can I write some custom validation in Yup. If that is possible then i could use Yup.string() and still perform the necessary validation

1. Use Yup.string()
2. Convert to date
3. Perform the necessary validation
4. Reconvert date to string
5. And return string

P.S This question has had many views but no significant ments or answers. Can I change the question formatting to make it more understandable?

• javascript
• reactjs
• yup
• react-hook-form

• Are you sure it's returning the ISO string? or is it returning a Date object that when logged is represented by its toString() method which returns said ISO string? – pilchard Commented May 8, 2021 at 15:54
• You may want to check out their custom transform -> date().transform((value, originalValue) => {}); – lshettyl Commented May 8, 2021 at 16:25
• @Ishettyl I checked their transform method but if I convert it to the string then validations do not run and it says that it is not correct datatype required by Yup.date() – dracarys Commented May 8, 2021 at 16:27
• @pilchard I am not exactly sure but I cant have the timezone info as the backend API cannot work with that – dracarys Commented May 8, 2021 at 16:28
• nullable() .required("Required") doens't make sense much. If you want to be null value, then remove required and provide true to nullable(true). This is just another point on the code. – Carmine Tambascia Commented Apr 4, 2022 at 8:37

1 Answer 1

You should write a quick function in order to change the format before to go head with further validation of yup. In order to do that you can use date-fns helper.

import parse from "date-fns/parse";

function parseDateString(value, originalValue) {
  return isDate(originalValue)
    ? originalValue  // this make sure that a value is provided
    : parse(originalValue, "yyyy-MM-dd", new Date());
}

Than can be used in this way:

import { date, object } from "yup";

const today = new Date();

const validationSchema = Yup.object({
  installation: Yup.string().nullable().required("Required"),
  from_date: Yup.date()
    .transform(parseDateString)
    .max(new Date(), "Cannot use future date")
    .required("Required"),
  to_date: Yup.date()
    .min(Yup.ref("from_date"), "To Date cannot be before From Date")
    .max(new Date(), "Cannot use future date")
    .required("Required")
});