CODEWITHSUNDEEP
javascriptreactjsyup
Broken Mind
Broken Mind

Reputation: 541

How to change Yup's date format validation

I have a validationSchema that displays an error if a user selects a date before a certain timeframe, however when the user receives the error through Yup it displays as below, this isnt quite what i would like as i need the user to understand the problem

enter image description here

However I would like the date to be formatted in a way that a user would understand, for instance just the date rather than the full time and milliseconds. My code for this is below,

const validationSchema = Yup.object({
        contractOptionToExtend: Yup.number('Option to Extend').required().min(0),
        originalEndDate: Yup.date().required().min(Yup.ref('startDate')),
        startDate: contract.leadContract && contract.leadContract.startDate ? Yup.date().min(contract.leadContract.startDate) : Yup.date(),
        ultimateEndDate: Yup.date().min(Yup.ref('currentEndDate')),
        currentEndDate: Yup.date().min(Yup.ref('originalEndDate'))
    });

 const initialValues = {
        contractOptionToExtend: contract && contract.contractOptionToExtendId || -1,
        originalEndDate: contract && contract.originalEndDate,
        startDate: contract && contract.startDate,
        ultimateEndDate: contract && contract.ultimateEndDate,
        currentEndDate: contract && contract.currentEndDate
    };

And my component of the date picker 

<DatePicker
                              margin="normal"
                              format="d MMM yyyy"
                                    label="Original End Date"
                                    value={values.originalEndDate}
                                    onChange={handleOriginalEndDateChange}
                                    onBlurCapture={change.bind(null, 'originalEndDate')}
                                    required
                                    id="originalEndDate"
                                    name="originalEndDate"
                                    autoOk={true}
                                    error={touched.originalEndDate && Boolean(errors.originalEndDate)}
                                    helperText={touched.originalEndDate ? errors.originalEndDate : ''}
                                />

Upvotes: 11

Views: 82697

Answers (2)

Samira
Samira

Reputation: 2733

it works for me very well :

   Yup.object().shape({
    voyageStartDate:Yup.date(),
    voyageEndDate:Yup.date()
        .when(
            'voyageStartDate',
            (voyageStartDate, schema) => (moment(voyageStartDate).isValid() ? schema.min(voyageStartDate) : schema),
        ),
})

Upvotes: 1

Raicuparta
Raicuparta

Reputation: 2115

The second argument to min() is the message you want displayed. You can pass a string, or a function that receives an object with the 'min' value as its argument. You can then format the value to your liking. For this example I provided an example of a formatDate() function that returns a nice and short date string, but you can do whatever else you need to.

function formatDate(date) {
  return new Date(date).toLocaleDateString()
}

Yup.date().min(
  Yup.ref('originalEndDate'),
  ({ min }) => `Date needs to be before ${formatDate(min)}!!`,
)

More info in Yup's docs

As a side note, this is also the case with the other validation functions. You can always use a function for the error message.

Upvotes: 24

Related Questions