使用 Formik 的日期时间

Formik 是一种在 React 应用程序中处理表单的工具。它提供了简单的 API 来处理表单输入和验证。在使用 Formik 时，有时需要处理日期和时间输入。在本文中，将介绍如何使用 Formik 处理日期时间。

安装

首先，需要安装 Formik。使用 npm 命令进行安装：

npm install formik --save

使用

处理日期

要处理日期输入，可以使用 Formik 的 Field 组件，并将其类型设为 'date'。

import React from 'react';
import { Formik, Form, Field } from 'formik';

function MyForm() {
  return (
    <Formik initialValues={{ date: new Date() }}>
      <Form>
        <Field type='date' name='date' />
        <button type='submit'>Submit</button>
      </Form>
    </Formik>
  );
}

使用 type='date' 将 Field 组件设置为日期类型。将表单字段的初始值设置为日期对象。

处理时间

类似地，要处理时间输入，可以使用 Field 组件，并将其类型设置为 'time'。

import React from 'react';
import { Formik, Form, Field } from 'formik';

function MyForm() {
  return (
    <Formik initialValues={{ time: new Date() }}>
      <Form>
        <Field type='time' name='time' />
        <button type='submit'>Submit</button>
      </Form>
    </Formik>
  );
}

这将根据本地时间制度创建一个时间选择器。

处理日期时间

如果要同时处理日期和时间输入，则可以将 Field 的类型设置为 'datetime-local'。

import React from 'react';
import { Formik, Form, Field } from 'formik';

function MyForm() {
  return (
    <Formik initialValues={{ datetime: new Date() }}>
      <Form>
        <Field type='datetime-local' name='datetime' />
        <button type='submit'>Submit</button>
      </Form>
    </Formik>
  );
}

该字段的值将以本地日期和时间格式显示。

验证

要在提交表单之前验证这些日期时间输入，可以使用 yup 库。

npm install yup --save

然后，在表单组件外定义表单架构。定义日期、时间和日期时间输入的验证规则。

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  date: Yup.date().required('Date is required'),
  time: Yup.string().required('Time is required'),
  datetime: Yup.date().required('Datetime is required'),
});

最后，在 Formik 组件中使用模式：

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

const validationSchema = Yup.object().shape({
  date: Yup.date().required('Date is required'),
  time: Yup.string().required('Time is required'),
  datetime: Yup.date().required('Datetime is required'),
});

function MyForm() {
  return (
    <Formik
      initialValues={{ date: new Date(), time: new Date(), datetime: new Date() }}
      validationSchema={validationSchema}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type='date' name='date' />
          <Field type='time' name='time' />
          <Field type='datetime-local' name='datetime' />
          <button type='submit' disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
}

结论

使用 Formik 处理日期时间输入是非常简单的。通过将日期类型设置为 'date'、将时间类型设置为 'time'、将日期时间类型设置为 'datetime-local'，可以快速创建日期时间输入。使用 yup 库验证这些输入也非常容易。