带有 Formik 表单的 React-datepicker答案

【问题标题】：React-datepicker with a Formik form带有 Formik 表单的 React-datepicker
【发布时间】：2019-05-26 09:42:04
【问题描述】：

我正在尝试在 Formik 表单中使用 react-datepicker。

我有：

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}
                                        />

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

控制台没有错误，但是警告说：

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

我尝试制作初始状态：

dueDate: new Date().toISOString(),

但没有区别。

我看过很多关于使用 Antd 的日期选择器进行设置的帖子，但找不到如何使用 react-datepicker 进行设置的说明。

【问题讨论】：

别管大家。我已经放弃了试图解决这个问题。我发现 react-formik-ui 它工作得很好
仍在回答，因为这个问题是有效的，并且可能对将来有相同查询的人有用。

标签： reactjs forms date formik react-datepicker

【解决方案1】：

更新到Dani Vijay's answer。
这使用了 Formik v2 中的 useField 和 useFormikContext，以简化组件的使用。

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 的回答）：

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

Code at codesandbox

【讨论】：

这是目前最好的答案（截至 2019 年底）
还有一个直接的setValue helper。 const [field,, { setValue }] = useField(props); 然后onChange={val => setValue(val)}
谢谢，不用担心，我找到了我的问题。我指的是像 React-Bootstrap 或 Material-UI 这样的库，在 React-Datapicker 上设置 is-invalid 或 error 类，类似于其他控件，以启用常见的样式和错误消息。为了支持这一点，我们只需要将 isInvalid 或 error 属性传递给这个包装器，然后 手动设置 className ，例如className={"form-control " + props.isInvalid ? "is-invalid" : ""}。换句话说，要使日期选择器在错误样式方面适合那些 React 组件库，需要做更多的手动工作。
我发现 Formik/Yup 和这个解决方案存在问题。任何非必需的验证都需要重新触摸要传播的日期选择器，而必需的验证会立即触发。这可能是一个是的问题。我为此创建了一个线程：stackoverflow.com/questions/67662804/…
一开始有件事让我很困惑 - 使用这个，你不需要添加 onChange 和 value 属性，你不需要它们，它可以在没有它们的情况下工作。

【解决方案2】：

react-datepicker可以通过setFieldValue与Formik一起使用，

const DatePickerField = ({ name, value, onChange }) => {
    return (
        <DatePicker
            selected={(value && new Date(value)) || null}
            onChange={val => {
                onChange(name, val);
            }}
        />
    );
};

const App = () => (
    <Formik
        initialValues={{ date: "" }}
        ...
    >
        {props => {
            const {
                values,
                handleSubmit,
                setFieldValue
                ...
            } = props;
            return (
                <form onSubmit={handleSubmit}>
                    <DatePickerField
                        name="date"
                        value={values.date}
                        onChange={setFieldValue}
                    />
                    ...

CodeSandbox 演示 here

【讨论】：

我不知道为什么我必须这样做：onChange={(val) => setFieldValue('date', val)}
@DamienRomito - 我的猜测：如果你直接使用DatePicker，这就是你需要做的。这个答案将该逻辑移动到DatePickerField 组件中，该组件是DatePicker 的包装器。在那里，它可以使用name 参数，因此不必硬编码名称'date'。
@DaniVijay - 使用 Formik v2 的 useFormikContext 和 useField，可以简化 DatePickerField 的使用，因此不需要在每次调用时显式传入 value 和 onChange。 Updated demo。用法：<DatePicker name="date" />。 my answer.

【解决方案3】：

我从您的代码中看到的是 DatePicker 不在 Formik 内部。在 React.js 中，我们总是创建可重用的组件，以保持代码干净且易于测试。为了能够在您的代码中使用 DatePicker，请创建一个单独的文件，为 Datepicker 编写代码并将其呈现为字段的组件。以下是您应该如何实施。

//First let's start with structure of Formik.
import PortDate from "./form/PortDate";
//define your components in a different directory. I named it form
const CreateForm = props => (
    <div>
      <Formik
        initialValues={{"your initial values"}}
        validate={your validation function here}
        onSubmit={values => {
          return props.onSubmit(values);
        }}
      >
        {({ isSubmitting }) => (
          <Form>     
            <Field name="startDate" component={DatePicker} label="Start Date" />

            <Field
              name="endDate"
              component={DatePicker}
              label="End Date"
              canBeDisabled={true}
            />

          </Form>
        )}
      </Formik>
    </div>
  );

现在让我们在不同的组件中实现我们的 Datepicker 逻辑。 //当你想添加样式时，使用 reactstrap 而不是 bootstrap

import { FormGroup, Label } from "reactstrap";
class DatePicker extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        dueDate: new Date(),
      };
      this.handleChange = this.handleChange.bind(this);
    }
    setFieldValueAndTouched(date, touched) {
      const { setFieldValue, setFieldTouched } = this.props.form;
      const { name } = this.props.field;
      setFieldValue(name, date, true); //field,value,shouldValidate
      setFieldTouched(name, touched, true); //field,touched,shouldValidate
    }
    handleChange(date) {

      this.setState(() => ({ dateValue: date }));
      this.setFieldValueAndTouched(date, true);    }

    render() {
      const { dueDate } = this.state;
      const {
        label,
        field,
        form: { touched, errors },
      } = this.props;
      // field and form props are passed to this component automatically because we render this inside component of the Field. 
      return (
        <FormGroup>
          <Label>{label}</Label>
          <div className="input-group">

              <DatePicker

                selected={dueDate}
                onChange={this.handleChange}
                peekNextMonth
                showMonthDropdown
                showYearDropdown
                maxDate={new Date()}
                dropdownMode="select"
              />

          </div>
        </FormGroup>
      );
    }
  }

  export default DatePicker;

【讨论】：

问题是关于使用an existing DatePicker class, defined in an imported module。问题中没有任何代码可以移动到不同的文件；它只是一个包含两个<DatePicker> 元素的表单。抱歉，我认为您的回答与此问题无关。

【解决方案4】：

更新到Dani Vijay and ToolmakerSteve's answers:

直接使用setValue 而不是setFieldValue。基于@asologor's comment。

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

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

注意：此方法允许您将 Formik 与 react-datepicker 一起使用，但它也适用于其他 UI 库，例如 Material-UI 和 Ant Design。 p>

【讨论】：

这个答案对于使用 NextJs 很有用，被用作 <DatePickerField minDate={new Date()} dateFormat="yyyy/MM/dd" id="date_run" placeholderText="Enter date yyyy/mm/dd" {...formik.getFieldProps('date_run')}/>。但是加载之前保存的数据2022-02-23T22:00:00.000Z 不会自动切换到日期格式（yyyy/MM/dd），而是保持原始日期/时间格式。

【解决方案5】：

const formik = useFormik({
    initialValues: {    
     date:""
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  }); 

 <MuiPickersUtilsProvider utils={DateFnsUtils}>
                  <KeyboardDatePicker
                    disableToolbar
                    variant="inline"
                    TextFieldComponent={(params) => {
                      return <TextField className={classes.TextField} 
                       {...params} variant="outlined" />;
                    }}
                    format="dd MMM yyyy"
                    margin="normal"
                    name="installDate"
                    value={formik.values.date}
                    onChange={(newDate) => {

                       //use this here
                      formik.setFieldValue("date", newDate);


                    }}
                    KeyboardButtonProps={{
                      "aria-label": "change date",
                    }}
                  />
                </MuiPickersUtilsProvider>

【讨论】：

【解决方案6】：

如何使它适用于日期范围选择器：

const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
const { setFieldValue } = useFormikContext();
const [field] = useField({ name: name, value: startDate });
const [field2] = useField({ name: name2, value: endDate });

<GroupContainer>
 <DatePicker
    {...field}
    onFocus={() => setFocusStart(true)}
    onCalendarClose={() => setFocusStart(false)}
    selected={(field.value && new Date(field.value)) || null}
    onChange={(val) => {
                    setStartDate(val);
                    setFieldValue(field.name, val);
                }}
    dateFormat="dd.MM.yyyy" 
    selectsStart                            
    minDate={new Date()}                                
            />
</GroupContainer>

<GroupContainer>
  <DatePicker
    {...field2}
    onFocus={() => setFocusEnd(true)}
    onCalendarClose={() => setFocusEnd(false)}          
    selected={(field2.value && new Date(field2.value)) || null}
    onChange={(val) => {
            setEndDate(val);
            setFieldValue(field2.name, val);
                }}
    dateFormat="dd.MM.yyyy"         
    selectsEnd
    minDate={new Date()}        
            />
</GroupContainer>

然后：

<ReactDatePicker name="arrivalDate" name2="departureDate" />

【讨论】：