我如何验证开始日期是否晚于 Yup 的结束日期？答案

【问题标题】：How do I validate if a start date is after an end date with Yup?我如何验证开始日期是否晚于 Yup 的结束日期？
【发布时间】：2020-03-07 15:47:36
【问题描述】：

我有一个使用 Formik 库创建事件的表单。我需要检查开始日期是否与结束日期重叠，反之亦然。我有两个选择日期和时间的日期选择器。我如何使用 Yup 来验证这一点并在它们重叠时显示错误消息？

提前感谢您的帮助

const validationSchema = Yup.object().shape({
    eventName: Yup.string()
        .min(1, "Must have a character")
        .max(10, "Must be shorter than 255")
        .required("Must enter an event name"),

    email: Yup.string()
        .email("Must be a valid email address")
        .max(255, "Must be shorter than 255")
        .required("Must enter an email"),

    eventStartDate: Yup.date()
        .required("Must enter start date"),


    eventEndDate: Yup.date()
        .required("Must enter end date")


})

var defaultValue = new Date().toDateString


export default function EventForm(){

    return (
        <Formik 
        initialValues={{eventName: "", email: "", }}
        validationSchema={validationSchema}
        onSubmit={(values, {setSubmitting, resetForm}) => {
            setTimeout(() => {

        }}
        >
            { ({
                values, 
                errors, 
                touched, 
                handleChange, 
                handleBlur,
                handleSubmit,
                isSubmitting
            }) => (
                <form onSubmit={handleSubmit}>
                <div className="input-row">
                    <TextField
                        id="eventName"
                        label="Event Name"
                        margin="normal"
                        variant="filled"
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.eventName}
                        className={touched.eventName && errors.eventName ? "has-error" : null}
                        />
                    <Error touched={touched.eventName} message={errors.eventName}/>
                </div>

                <div className="dateHolder">
                    <div className="startDate">
                            <TextField 
                                id="eventStartDate"
                                label="Event Start Date"
                                type="datetime-local"
                                InputLabelProps={{
                                    shrink: true
                                }}
                                format="yyy-dd-mm HH:MM:ss"
                                onChange={handleChange}
                                onBlur={handleBlur}
                                value={values.eventStartDate}
                            />
                            <Error touched={touched.eventStartDate} message={errors.eventStartDate}/>
                    </div>

                    <div className="endDate">
                    <TextField 
                                id="eventEndDate"
                                label="Event End Date"
                                type="datetime-local"
                                InputLabelProps={{
                                    shrink: true
                                }}
                                format="yyy-dd-mm HH:MM:ss"
                                onChange={handleChange}
                                onBlur={handleBlur}
                                value={values.eventEndDate}
                            />
                            <Error touched={touched.eventEndDate} message={errors.eventEndDate}/>
                    </div>
                </div>


                <div className="input-row">
                <button type="submit" disabled={isSubmitting} >
                    Submit
                </button>
          </div>

            </form>
            )}
        </Formik>
    )

}

【问题讨论】：

标签： reactjs material-ui formik yup

【解决方案1】：

使用ref就可以了

yup.object().shape({
              startDate: date(),
              endDate: date().min(
                  yup.ref('startDate'),
                  "end date can't be before start date"
                )
            });

【讨论】：

我完全同意你@gogaz

【解决方案2】：

你可以使用when条件：

eventStartDate: yup.date().default(() => new Date()),
eventEndDate: yup
        .date()
        .when(
            "eventStartDate",
            (eventStartDate, schema) => eventStartDate && schema.min(eventStartDate))

【讨论】：

when情况下不应该是“eventStartDate”吗？

【解决方案3】：

纳德的回答对我有用。但是我有一些额外的验证条件，如果选中了一个复选框，那么在结束日期之前验证日期开始日期。所以，我想出了这个代码。离开以防将来有人需要这个

Yup.object.shape({
    ServiceCheck: Yup.boolean().default(false),
    StartDateTime: Yup.date().when('ServiceCheck', {
      is: (ServiceCheck=> {
        return (!!ServiceCheck) ? true : false;
      }),
      then: Yup.date().required('Start Date/Time is required')
    }).nullable(),
    EndDateTime: Yup.date().when('ServiceCheck', {
      is: (ServiceCheck=> {
        return (!!ServiceCheck) ? true : false;
      }),
      then: Yup.date().min(Yup.ref('StartDateTime'),
        "End date can't be before Start date").required('End Date/Time is required')
    }).nullable(),
})

无条件

Yup.object().shape({
              StartDate: Yup.date(),
              EndDate: Yup.date().min(
                  Yup.ref('StartDate'),
                  "End date can't be before Start date"
                )
            });

【讨论】：