Блог

Я пытаюсь использовать Yup с Formik для экрана моего профиля пользователя. Проверка работает нормально, но ожидается, что формат даты, введенной пользователем, будет в формате США ММ / ДД / ГГГГ, а не в требуемом для приложения европейском / британском стандартном формате ДД / ММ / ГГГГ. Ввод 31/12/1995 завершается ошибкой проверки.

   dateOfBirth: Yup.date()
      .required("Date of Birth is required")
      .max(dateToday, "Future date not allowed")
 

Я просмотрел документы Yup и SO, но я не могу понять, как это сделать. Есть идеи?

У меня была такая же проблема, и я решил ее, используя пример в Yup README, заменив MomentJS на date-fns, который я использую для манипулирования датой.

Значение возвращает недопустимую дату, прежде чем будет применено пользовательское преобразование, поэтому вы должны использовать исходное значение и контекст, чтобы проверить, нужно ли вам вообще запускать логику преобразования, и если да, запустите ее для значения из поля, а не для преобразованного значения.

Да, преобразование документов и пример даты

 import { parse } from 'date-fns';    

[...]

date()
  .transform((value, originalValue, context) => {
      // check to see if the previous transform already parsed the date
      if (context.isType(value)) return value;

      // Date parsing failed in previous transform
      // Parse the date as a euro formatted date string or returns Invalid Date
      return parse(originalValue, 'dd/MM/yyyy', new Date());
})
 

Это отлично работает для меня и работает как для США, так и для форматов даты в Великобритании (вам все равно нужно будет выполнить манипуляции с датой, если она в формате США, поскольку она будет представлять это значение как действительное)

Если вам нужны ТОЛЬКО даты в Великобритании / Евро, просто снимите проверку типа контекста

 .transform((value, originalValue) => parse(originalValue, 'dd/MM/yyyy', new Date()))
 

Вы можете использовать метод преобразования для анализа значения. Нравится:

 startDate: Yup.date()
    .transform(value => {
      return value ? moment(value).toDate() : value;
    })
    .required("Date of Birth is required")
    .max(dateToday, "Future date not allowed");