在 react-datepicker 中使用带有日期范围的 React-Redux 表单字段

Question

来自 react-datepicker：

https://github.com/Hacker0x01/react-datepicker/blob/master/docs-site/src/examples/date_range.jsx#L4

为此：

datePicker.js

const { fields, input , meta } = this.props;
const { touched, error, warning } = meta || {}

...

return (

<DatePicker 
    selected={this.state.startDate ? this.state.startDate : undefined} 
    selectsStart 
    startDate={this.state.startDate} 
    endDate={this.state.endDate} 
    onChange={this.handleChangeStart} 
    dateFormat="DD/MM/YYYY"
/>
<span> to </span>  
<DatePicker 
    selected={this.state.endDate ? this.state.endDate : undefined} 
    selectsEnd 
    startDate={this.state.startDate}  
    endDate={this.state.endDate} 
    onChange={this.handleChangeEnd} 
    dateFormat="DD/MM/YYYY"
/>
{touched && ( /* << how to declare the meta respectively ? */  
(error && <span>ERR</span>)||
(warning && <span>WARN</span>)
)}

...

)

由于有2个字段输入，我决定使用redux形式的“字段”，但是我应该如何指定我在组件中得到的输入名称和值？

我试试这个，但是名字和值好像不对，不知道怎么声明名字和从组件中获取值。

callDatePicker.js

<Fields 
   labelNode={<Label>Range</Label>}
   labelStartDate="Start Date"
   labelEndDate="End Date"
   names={["nameStartDate", "nameEndDate"]}
   values={[ this.props.start , this.props.end]} << this returns wrong saying the value is object instead of string..
   component={ControlledDateRangePicker}
/>

Answer 1

创建两个单独的字段：

    <Field
        name="startDatePicker"
        label="Start Date"
        fieldName="startDate"
        component={ControlledDateRangePicker}
        ...
      />
    <Field
        name="endDatePicker"
        label="End Date"
        fieldName="endDate"
        component={ControlledDateRangePicker}
        ...
      />

在 ControlledDateRangePicker 中只使用一个 DatePicker 组件，应该是通用的。

Answer 2

在过去的几天里，这一直是我的眼中钉。

当用户选择新的 startDate 时，我试图自动调整 Redux 表单中的 endDate 字段，以确保字段相隔不超过 60 天。

为了实现这一点，我们在 ReactDatepicker 的 onChange 中使用了 Redux Form 的 change 属性：https://redux-form.com/8.0.4/docs/api/props.md/#-code-change-field-string-value-any-function-code-

希望这会有所帮助！

Answer 3

你可以做这样的事情。 使用两个字段作为开始日期和结束日期。除非您不会分别获得两个表单值作为开始日期和结束日期。

只需浏览我的代码。你会明白这个过程。

      <Field
        isRequired
        name="leaseStartDate"
        component={renderDateComponent}
        label="Start Date of Lease"
        labelWidth={12}
        inputWidth={12}
        maxDate`enter code here`
        className="form-control"
        errorClass="error"
      />

      <Field
        isRequired
        name="leaseEndDate"
        component={renderDateComponent}
        label="End Date of Lease"
        labelWidth={12}
        inputWidth={12}
        minDate
        className="form-control"
        errorClass="error"
      />

为你的 datepicker.js 使用一个类组件 使用 mapStateToProps 获取 StartDate 和 EndDate 的更新表单值。 所以如果之前的 props 有任何变化，你可以使用 componentDidUpdate 来更新日期。

const mapStateToProps = state => ({
  formValues: getFormValues('unifyAddEditSiteDetailsForm')(state)
});


class RenderDateComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: null,
      endDate: null
    };
  }

  componentDidUpdate(prevProps) {
    const {formValues} = this.props;

    if (formValues !== prevProps.formValues) {
      this.updateDate(formValues);
    }
  }

  updateDate = formData => {
    this.setState({
      startDate: formData.leaseStartDate,
      endDate: formData.leaseEndDate
    });
  }

  render() {
    const {
      input,
      labelWidth,
      isRequired,
      label,
      inputWidth,
      isIcon,
      iconClass,
      maxDate,
      minDate,
      meta: {
        touched,
        error }
    } = this.props;

    const { startDate, endDate } = this.state;

    return (
      <FormGroup 
        className="hours-form-group" 
        validationState={(touched && error) ? 'error' : null}
      >
        <DatePicker
          {...input}
          className="datepicker-input"
          value={input.value && moment(input.value).format('MMM DD, YYYY')}
          onBlur={() => input.onBlur(moment(input.value).format('MMM DD, YYYY'))}
          autoComplete='off'
          maxDate={maxDate ? endDate : null}
          minDate={minDate ? startDate : null}
        />
        {touched && error && <HelpBlock>{error}</HelpBlock>}
      </Col>
    </FormGroup>
    );
  }
}


export default connect(mapStateToProps)(RenderDateComponent);