Блог

Я добавил проверку yup в средство выбора даты, так что происходит сейчас, если я нажму на отправку, в нем будет указано, что поле требуется для недопустимой даты!но моя задача должна установить проверку, например, ошибка будет генерироваться только в том случае, если дата больше сегодняшней даты, которую я добавил в max, а также она не добавлена ни в одну .required(«Требуется!») вещь, но не уверен, почему она работает так, как требуется! поле, которое мне не нужно устанавливать по мере необходимости!

 const today = moment().format("YYYY-MM-DD");
const validationSchema = yup.object().shape({
  date_of_birth: yup
    .date()
    .max(today, "DOB cannot be greater than today's date")
    .typeError("Invalid Date!")
});

export default function MaterialUIPickers() {
  const IndivisualForm = useFormik({
    initialValues: {
      date_of_birth: null
    },
    enableReinitialize: true,
    validationSchema,
    onSubmit: (values) => {
    }
  });
  const handleChangeDate = (date) => {
    IndivisualForm.setFieldValue(
      "date_of_birth",
      moment(date).format("YYYY-MM-DD")
    );
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justifyContent="space-around">
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={IndivisualForm.values.date_of_birth}
          error={Boolean(IndivisualForm.errors.date_of_birth)}
          helperText={IndivisualForm.errors.date_of_birth}
          onChange={handleChangeDate}
          maxDate={today}
          KeyboardButtonProps={{
            "aria-label": "change date"
          }}
        />

        <Button
          color="primary"
          variant="contained"
          type="submit"
          onClick={IndivisualForm.handleSubmit}
        >
          Submit
        </Button>
      </Grid>
    </MuiPickersUtilsProvider>
  );
}
 

Ссылка на песочницу кода

Не уверен, почему max здесь должно работать?

В идеале, когда вы хотите протестировать какое-то сравнение. У них там есть метод тестирования. Итак, в основном вам нужно сделать это:

 const validationSchema = yup.object().shape({
  date_of_birth: yup
    .date()
    .nullable()
    .notRequired()
    .test(
      "Is date greater",
      "DOB cannot be greater than today's date",
      (value) => {
        if (!value) return true;
        return moment(today).diff(value) > 0;
      }
    )
});

 

Вот живая демонстрация codesandbox: https://codesandbox.io/s/material-demo-forked-kbxlz?file=/demo.js

Или непосредственно смотрите здесь: https://kbxlz.csb.app /