使用Formik表单的React-datepicker [英] React-datepicker with a Formik form

问题描述

我正在尝试以Formik形式使用react-datepicker.

I'm trying to use react-datepicker in a Formik form.

我有:

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";


class Fuate extends React.Component {
    state = {
        dueDate: new Date()

    }

<Formik
                initialValues={initialValues}
                validationSchema={Yup.object().shape({
                    title: Yup.string().required("A title is required "),
                })}

                onSubmit={this.handleSubmit}

                render={({ 
                    errors, 
                    status, 
                    touched, 
                    setFieldValue,
                    setFieldTouched, 
                    handleChange, 
                    handleBlur,
                    handleSubmit, 
                    isSubmitting, 
                    dirty, 
                    values 
                }) => {

                return (
                    <div>
            ...

<DatePicker
                                            name={'dueDate'}
                                            value={values['dueDate']}
                                            onChange={e => setFieldValue('dueDate', e)}
                                        />
                                        <DatePicker
                                        style={{ width: 180 }}
                                        date={values.dueDate}
                                        mode="date"
                                        format="YYYY-MM-DD"
                                        minDate={Date.now.toString()}
                                        maxDate="2050-06-01"
                                        confirmBtnText="Confirm"
                                        cancelBtnText="Cancel"
                                        showIcon={false}
                                        customStyles={{
                                            dateInput: {
                                            marginLeft: 0,
                                            borderColor: "#fff"
                                            }
                                        }}
                                        onDateChange={date => setFieldValue("dueDate", date)}
                                        onTouch={setFieldTouched}
                                        />

对于这两个选项，表单都会呈现出来，我可以在日历上选择一个日期，但它不会出现在框中，并且状态值不会随选择内容而更新.

For both of these options, the form renders, I can select a date on the calendar but it does not appear in the box and the state value is not updated with the selection.

控制台中没有错误，但警告显示:

There are no errors in the console, but the warning says:

从v2.0.0-beta.1 date-fns开始，不接受字符串作为 论点.请使用parseISO解析字符串.看: toDate @ index.js:45

Starting with v2.0.0-beta.1 date-fns doesn't accept strings as arguments. Please use parseISO to parse strings. See: toDate @ index.js:45

我尝试设置初始状态:

dueDate: new Date().toISOString(),

但这没什么区别.

我已经看到很多关于使用Antd的日期选择器进行设置的帖子，但是找不到有关如何使用react-datepicker进行操作的说明.

I've seen lots of posts about setting this up with Antd's date picker, but can't find instructions for how to do it with react-datepicker.

推荐答案

更新为 Dani Vijay的答案.
它使用Formik v2中的useField和 useFormikContext 来简化组件.

Update to Dani Vijay's answer.
This uses useField and useFormikContext from Formik v2, to simplify usage of the component.

DatePicker.jsx:

DatePicker.jsx:

import React from "react";
import { useField, useFormikContext } from "formik";
import DatePicker from "react-datepicker";

export const DatePickerField = ({ ...props }) => {
  const { setFieldValue } = useFormikContext();
  const [field] = useField(props);
  return (
    <DatePicker
      {...field}
      {...props}
      selected={(field.value && new Date(field.value)) || null}
      onChange={val => {
        setFieldValue(field.name, val);
      }}
    />
  );
};

用法(有关完整的表单声明，请参见Dani的答案):

Usage (see Dani's answer for the complete form declaration):

...
<DatePicker name="date" />
...

代码库中的代码

这篇关于使用Formik表单的React-datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！