Выбор диапазона response-flatpickr с двумя входами, заполняющими обе даты в первом входе - PullRequest
Новая
       21

Выбор диапазона response-flatpickr с двумя входами, заполняющими обе даты в первом входе

0 голосов
/ 04 июля 2019

Я использую плагин реагировать на 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}
      />
    );
  }
}

Когда я выбираю «на дату», он также устанавливает значение в поле «с даты». Предоставление изображения ниже:

enter image description here

Я создал для этого песочницу с кодом:

Песочница Ссылка

Не уверен, что мне здесь не хватает.

1 Ответ

0 голосов
/ 04 июля 2019

Разобрался с проблемой. setDate создавал проблему. То, что происходило:

  1. вы меняете дату, flatpickr обновляет дату1 до даты2, потому что в основной библиотеке это единственный способ узнать, как отображать диапазоны

  2. rangePlugin идет выше этого и снова обновляет значение, добавляя логику для отображения диапазонов в нескольких входах

  3. Вы идете после плагина диапазона и в основном повторяете шаг 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}
      />
    );
  }
}

Код Песочница Ссылка

...