react-flatpickr 范围选择，两个输入填充第一个输入中的两个日期

Question

我正在使用提供以下代码的 react-flatpickr 范围插件：

Index.js

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "./datePicker.js";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <DatePicker
        options={{
          dateFormat: "d-M-Y",
          defaultDate: "",
          disableMobile: "true",
          maxDate: "today"
        }}
        fromDateID="DashboardEndDatePicker"
        selectValue={[]}
        placeholder="From Date"
      />
      &nbsp;&nbsp;&nbsp;&nbsp;
      <input id="DashboardEndDatePicker" placeholder="To Date" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

datePicker.js

import React, { Component } from "react";
import Flatpickr from "react-flatpickr";
import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
import "flatpickr/dist/flatpickr.min.css";
import "flatpickr/dist/themes/light.css";

export default class DatePicker extends Component {
  constructor(props) {
    super(props);
    this.setDate = this.setDate.bind(this);
    this.clearDate = this.clearDate.bind(this);

    this.state = {
      selectValue: props.selectValue ? props.selectValue : "",
      options: props.options
        ? Object.assign({}, props.options, {
            plugins: [new rangePlugin({ input: "#" + props.fromDateID })]
          })
        : { plugins: [new rangePlugin({ input: "#" + props.fromDateID })] },
      disabled: props.disabled ? props.disabled : false,
      placeholder: props.placeholder ? props.placeholder : ""
    };
  }

  componentWillReceiveProps(newProps) {
    this.setState({
      selectValue: newProps.selectValue ? newProps.selectValue : "",
      options: newProps.options
        ? Object.assign({}, newProps.options, {
            plugins: [new rangePlugin({ input: "#" + newProps.fromDateID })]
          })
        : { plugins: [new rangePlugin({ input: "#" + newProps.fromDateID })] },
      disabled: newProps.disabled ? newProps.disabled : false,
      placeholder: newProps.placeholder ? newProps.placeholder : ""
    });
  }

  clearDate() {
    this.refs.refDatePicker.flatpickr.clear();
  }

  setDate(newValue) {
    this.setState({
      selectValue: newValue ? newValue : ""
    });
    if (this.props.onChange) {
      this.props.onChange(newValue);
    }
  }

  render() {
    return (
      <Flatpickr
        className="form-control clickable"
        disabled={this.state.disabled}
        ref="refDatePicker"
        placeholder={this.state.placeholder}
        options={this.state.options}
        value={this.state.selectValue}
        onChange={this.setDate}
      />
    );
  }
}

每当我选择 "to date" 时，它在 "from date" 字段中的设置也是相同的。提供下图：

我已经为它创建了一个代码沙盒：

Sandbox Link

不确定我在这里遗漏了什么。

Answer 1

解决了问题。 setDate 造成了问题。发生的事情是：

您更改日期，flatpickr 会将 date1 更新为 date2，因为在核心库中，这是它知道如何显示范围的唯一方式
rangePlugin 高于它并再次更新值，添加逻辑以在多个输入中显示范围
你在范围插件之后，基本上重复了步骤 1，从而覆盖了步骤 2

删除 setDate 对我有用。

import React, { Component } from "react";
import Flatpickr from "react-flatpickr";
import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
import "flatpickr/dist/flatpickr.min.css";
import "flatpickr/dist/themes/light.css";

export default class DatePicker extends Component {
  constructor(props) {
    super(props);
    this.setDate = this.setDate.bind(this);
    this.clearDate = this.clearDate.bind(this);

    this.state = {
      options: props.options
        ? Object.assign({}, props.options, {
            plugins: [new rangePlugin({ input: "#" + props.fromDateID })]
          })
        : { plugins: [new rangePlugin({ input: "#" + props.fromDateID })] },
      disabled: props.disabled ? props.disabled : false,
      placeholder: props.placeholder ? props.placeholder : ""
    };
  }

  componentWillReceiveProps(newProps) {
    this.setState({
      options: newProps.options
        ? Object.assign({}, newProps.options, {
            plugins: [new rangePlugin({ input: "#" + newProps.fromDateID })]
          })
        : { plugins: [new rangePlugin({ input: "#" + newProps.fromDateID })] },
      disabled: newProps.disabled ? newProps.disabled : false,
      placeholder: newProps.placeholder ? newProps.placeholder : ""
    });
  }

  clearDate() {
    this.refs.refDatePicker.flatpickr.clear();
  }

  setDate(newValue) {
    if (this.props.onChange) {
      this.props.onChange(newValue);
    }
  }

  render() {
    return (
      <Flatpickr
        className="form-control clickable"
        disabled={this.state.disabled}
        ref="refDatePicker"
        placeholder={this.state.placeholder}
        options={this.state.options}
        onChange={this.setDate}
      />
    );
  }
}

Code Sand Box Link

react-flatpickr 范围选择，两个输入填充第一个输入中的两个日期

react-flatpickr range selection with two inputs populating both the dates in first input

javascript

reactjs

date-range

flatpickr