如何更改 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 : ''}
                                />

Answer 1

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

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

附带说明一下，其他验证函数也是如此。您始终可以使用函数来显示错误消息。

Answer 2

它很适合我:

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

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

How to change Yup's date format validation

javascript

reactjs

yup