1

我正在使用 react-flatpickr range 插件，提供以下代码：

索引.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);

日期选择器.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”字段中设置相同的值。提供下图：

在此处输入图像描述

我为此创建了一个代码沙箱：

沙盒链接

不知道我在这里缺少什么。

4

1 回答 1

1

想通了这个问题。setDate正在制造问题。发生的事情是：

  1. 您更改日期，flatpickr 将 date1 更新为 date2，因为在核心库中，这是它知道如何显示范围的唯一方法

  2. rangePlugin 高于它并再次更新值，添加逻辑以显示多个输入中的范围

  3. 你在 range 插件之后，基本上重复第 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}
      />
    );
  }
}

代码沙盒链接

于 2019-07-04T10:46:52.713 回答