Question

我正在尝试使datepicker与redux-form一起工作，我已经阅读了关于stackoverflow的答案，使选择器可以正常工作，但是由于某种原因我无法在该字段上键入任何内容。有趣的是，如果我尝试粘贴有效日期（例如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);

Answer 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"
/>

Answer 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>
);

};

如何在redux表单中使用react-datepicker？

2 个答案: