Question

我有一个validateSchema，如果用户选择某个时间范围之前的日期，则会显示错误，但是当用户通过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)}!!`,
)

More info in Yup's docs

请注意，其他验证功能也是如此。您始终可以将函数用于错误消息。

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

1 个答案: