如何将 react-datepicker 与 redux 表单一起使用？

Posted 2023-05-07

【中文标题】如何将 react-datepicker 与 redux 表单一起使用？

【英文标题】：How to use react-datepicker with redux form?

【发布时间】：2019-09-22 10:44:57

【问题描述】：

我正在尝试使 react datepicker 与 redux-form 一起使用，我已经阅读了关于 *** 的答案我使选择器工作正常，但由于某种原因我无法在该字段上输入任何内容。有趣的是，如果我尝试粘贴像 12/30/2019 这样的有效日期，那么它也可以工作。这是我的代码

import React from "react";
import  Field, reduxForm  from "redux-form";
import DatePicker from "react-datepicker";
import moment from "moment";

const RenderDatePicker = ( input ) => (
  <div>
    <DatePicker
      ...input
      className="form-control"
      onChange=date => input.onChange(moment(date).format("MM/DD/YYYY"))
      selected=input.value ? moment(input.value, "MM/DD/YYYY") : null
    />
  </div>
);

const SimpleForm = props => 
  const  handleSubmit, pristine, reset, submitting  = props;
  return (
    <form onSubmit=handleSubmit>
      <Field name="datePicker" component=RenderDatePicker />

      <button type="submit">
        Submit
      </button>
    </form>
  );
;

export default reduxForm(
  form: "simple"
)(SimpleForm);

【问题讨论】：

试试这个参考 -> github.com/Hacker0x01/react-datepicker/issues/543

【参考方案1】：

我所做的是创建一个单独的Datepicker 组件

export const FieldDatePicker = ( input, placeholder, minDate, maxDate ) => (
    <DatePicker
        className="plus-icon"
        dateFormat="yyyy/MM/dd"
        selected=input.value || null
        onChange=input.onChange
        minDate=minDate
        maxDate=maxDate
        disabledKeyboardNavigation
        placeholderText=placeholder
    />
);

然后从<Field />使用它

<Field
    component=FieldDatePicker
    name="date_till"
    placeholder="YYYY/MM/DD"
/>

【参考方案2】：

试试这个

const RenderDatePicker = (input) => 
const inputWrap = (
    <div>
     <DatePicker
      ...input
      className="form-control"
      onChange=date => input.onChange(moment(date).format("MM/DD/YYYY"))
      selected=input.value ? moment(input.value, "MM/DD/YYYY") : null
    />

return (
    <div>
        inputWrap
    </div>
);

;