我有一个使用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>
)
}