如何创建一个用于输入日期和时间的简单 formik 字段？

Question

我正在尝试创建一个非常简单的 formik 字段来输入日期和时间。要求是：

该字段的值应该是 JavaScript Date.
该字段应允许在输入字段中输入自由格式的文本，并在出现模糊事件时将其转换为 Date。
如果输入的字符串无法转换为有效日期，该字段应显示错误。
如果重置表单，该字段应显示日期的初始值。

虽然我能够很容易地满足要求 1 和 2，但我在满足要求 3 和 4 时遇到了问题。我认为部分问题是我将输入字段的原始文本存储在内部状态。但是，我想不出别的办法。有没有更好的模式？

这是我的 CodeSandbox。请参阅标有“问题 1”和“问题 2”的部分

Answer 1

试试这个解决方案：

使用 Formik 中的 Field 组件来绑定您的自定义组件

<Field name="date" timezone={DefaultTz} component={DateTimeField} />

使用 Field 中的 form 属性来显示错误

{form.errors.date ? (
  <div className="text-danger">{form.errors.date}</div>
) : null}

使用扩展运算符绑定 formik 字段和您转换日期的自定义模糊

<input
  className="form-control"
  placeholder={format}
  {...{ ...field, onBlur }}
/>

总的来说是这样

import React from "react";
import { DateUtils } from "@react-force/date-utils";

export interface DateTimeFieldProps extends React.InputHTMLAttributes<Date> {
  field: any;
  form: any;
  timezone: string;
  format?: string;
}

export const DateTimeField = ({
  field,
  form,
  timezone,
  format = "YYYY-MM-DD hh:mm A",
}: DateTimeFieldProps) => {
  const onBlur = () => {
    try {
      form.setValues({
        date: DateUtils.createDate(field.value, format, timezone),
      });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <React.Fragment>
      <input
        className="form-control"
        placeholder={format}
        {...{ ...field, onBlur }}
      />
      {form.errors.date ? (
        <div className="text-danger">{form.errors.date}</div>
      ) : null}
    </React.Fragment>
  );
};

工作版本是here

如何创建一个用于输入日期和时间的简单 formik 字段？

How to create a simple formik field for entering date and time?

reactjs

formik