在反应日期选择器上使用 yup 设置日期范围 - Javascript

很多时候，我们需要在 React 应用程序中创建一个日期选择器组件，并使用 Yup 进行验证。但是，有时我们需要设置只允许选择某些日期范围内的日期。在这个教程中，我们将学习如何使用 Yup 来设置日期范围。

程序代码

首先，让我们从以下组件开始：

import { useFormik } from 'formik';
import React from 'react';
import DatePicker from 'react-datepicker';
import * as Yup from 'yup';
import 'react-datepicker/dist/react-datepicker.css';

function App() {
  const formik = useFormik({
    initialValues: {
      date: new Date(),
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values));
    },
    validationSchema: Yup.object({
      date: Yup.date()
        .required('Date is required')
    }),
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <DatePicker
        dateFormat="yyyy-MM-dd"
        selected={formik.values.date}
        onChange={(date) => formik.setFieldValue('date', date)}
      />
      {formik.touched.date && formik.errors.date ? (
        <div>{formik.errors.date}</div>
      ) : null}
      <button type="submit">Submit</button>
    </form>
  );
}

在上述代码中，我们创建了一个简单的表单，其中包括一个日期选择器和一个提交按钮。我们正在使用 useFormik 钩子来处理表单逻辑。我们还使用 Yup 来验证日期字段是否为有效的日期。

现在，让我们添加日期范围验证。

我们将使用 Yup 的 min 和 max 方法来设置日期范围。在这里，我们将设置日期可选择的最小日期为 2020 年 1 月 1 日，最大日期为明天。这意味着用户只能选择在这个日期范围内的日期。

validationSchema: Yup.object({
  date: Yup.date()
    .min(new Date(2020, 0, 1), 'Date must be after 2020-01-01')
    .max(new Date(new Date().getTime() + 24 * 60 * 60 * 1000), 'Date cannot be after tomorrow')
    .required('Date is required')
}),

在上述代码中，我们将验证模式添加到 Yup 对象中，并将其传递给 useFormik 钩子。现在，如果用户尝试选择不在指定日期范围内的日期，则会显示错误消息。

我们完成了在 React 应用程序中使用 Yup 设置日期范围的教程。

总结

在本教程中，我们了解了如何使用 Yup 在反应日期选择器上设置日期范围。您可以使用此方法来验证具有日期范围的输入字段。如果您喜欢本教程，请分享并留下您的评论。感谢您的阅读！