如何更改 Yup 的日期格式验证

Question

我有一个验证架构，如果用户在某个时间范围之前选择一个日期，它会显示错误，但是当用户通过 Yup 收到错误时，它显示如下，这不是我想要的，因为我需要用户理解问题

但是，我希望以用户可以理解的方式格式化日期，例如只是日期而不是完整的时间和毫秒。我的代码如下，

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
    };

我的日期选择器组件

<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 : ''}
                                />

Answer 1

的第二个参数min()是您想要显示的消息。您可以传递一个字符串或一个函数，该函数接收一个以 'min' 值作为参数的对象。然后，您可以根据自己的喜好设置该值的格式。对于这个例子，我提供了一个formatDate()函数的例子，它返回一个漂亮的短日期字符串，但你可以做任何你需要的事情。

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

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

Yup 文档中的更多信息

作为旁注，其他验证功能也是如此。您始终可以使用错误消息的函数。