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

Question

我有一个验证模式(validationSchema)，如果用户选择了一个特定时间段之前的日期，就会显示错误。然而，当用户通过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 : ''}
                                />

- Broken Mind

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文档中有更多信息

顺便提一下，其他验证函数也是如此。您始终可以为错误消息使用函数。

- Raicuparta

---

谢谢，现在这个效果好多了。不过，原始结束日期：Yup.date().required().min(Yup.ref('startDate'), ({ min }) => Orginal End Date cannot be a date before ${(min)}) 仍然给出了一个很长的日期，有没有办法缩短它？ - Broken Mind

好的，你需要自己进行格式化。在我的例子中，我使用了一个想象中的 formatDate 函数来实现这个目的。例如，你可以使用 ${new Date(min).toDateString()} 或 ${new Date(min).toLocaleDateString()}。 - Raicuparta

Answer 2

对我来说，它非常有效：

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

- Samira