formik yup date validation code example

Example: Formik yup date validation

import React from "react";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";

import Paper from "elevate-ui/Paper";
import Datetime from "elevate-ui/Datetime";
import Button from "elevate-ui/Button";
import Typography from "elevate-ui/Typography";

const Datetimes = () => (
  <Paper>
    <Typography type="body" gutterBottom>
      {`<Datetime />`} uses react-datepicker under the hood to create date
      inputs. See the full documentation and available props{" "}
      <a href="https://github.com/Hacker0x01/react-datepicker">here</a>.
    </Typography>
    <Formik
      initialValues={{ startDate: null }}
      validationSchema={() =>
        Yup.object().shape({
          startDate: Yup.date().required("Start date is required"),
        })
      }
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
      render={({ isSubmitting, isValid }) => (
        <Form noValidate style={{ maxWidth: "420px" }}>
          <Field
            id="startDate"
            name="startDate"
            label="Start Date"
            dateFormat="MMMM d, yyyy"
            component={Datetime}
          />
          <Button type="submit" disabled={!isValid || isSubmitting}>
            Submit
          </Button>
        </Form>
      )}
    />
    <Formik
      initialValues={{ startDateTime: null }}
      validationSchema={() =>
        Yup.object().shape({
          startDateTime: Yup.date().required("Start date & time is required"),
        })
      }
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
      render={({ isSubmitting, isValid }) => (
        <Form noValidate style={{ maxWidth: "420px", marginTop: "24px" }}>
          <Field
            id="startDateTime"
            name="startDateTime"
            label="Start Date & Time"
            dateFormat="MMMM d, yyyy hh:mmaa"
            showTimeSelect
            component={Datetime}
          />
          <Button type="submit" disabled={!isValid || isSubmitting}>
            Submit
          </Button>
        </Form>
      )}
    />
  </Paper>
);

export default Datetimes;