Не работает 2 DateRangePicker (даты реакции) на 1 странице - PullRequest
Новая
       73

Не работает 2 DateRangePicker (даты реакции) на 1 странице

1 голос
/ 24 февраля 2020

Мне нужно опубликовать 2 DateRangePicker на 1 странице, но мой код не работает. Может быть некоторый конфликт между переменными startDate и endDate. Хотя я использую другие переменные, ошибка не исчезает. Пожалуйста, помогите решить проблему .. вот мой код: 

    constructor(props) {
        super(props);
        moment.locale('ru');
        this.state = {
            startDate: null,
            endDate: null,
            startDate2: null,
            endDate2: null,
            focusedInput: null,
            focusedInput2: null,
        };
    }


    render() {
        return (
            <div>
                <DateRangePicker
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    onDatesChange={({startDate, endDate}) => this.setState({
                        startDate,
                        endDate
                    })}
                    focusedInput={this.state.focusedInput}
                    onFocusChange={(focusedInput) => this.setState({focusedInput})}
                    readOnly={true}
                    hideKeyboardShortcutsPanel={true}
                    showClearDates={true}
                    startDateId="startDate"
                    endDateId="endDate"
                    isOutsideRange={() => false}
                />
                <DateRangePicker
                    startDate={this.state.startDate2}
                    endDate={this.state.endDate2}
                    onDatesChange={({startDate2, endDate2}) => this.setState({
                        startDate2,
                        endDate2
                    })}
                    focusedInput={this.state.focusedInput2}
                    onFocusChange={(focusedInput2) => this.setState({focusedInput2})}
                    readOnly={true}
                    hideKeyboardShortcutsPanel={true}
                    showClearDates={true}
                    startDateId="startDate2"
                    endDateId="endDate2"
                    isOutsideRange={() => false}
                />
            </div>

        );
    }
}

1 Ответ

0 голосов
/ 24 февраля 2020 
      <DateRangePicker
      startDate={this.state.startDate}
      endDate={this.state.endDate}
      onDatesChange={({startDate,endDate}) =>
        this.setState({
          startDate:startDate,
          endDate:endDate
        })
      }
      focusedInput={this.state.focusedInput}
      onFocusChange={focusedInput => this.setState({ focusedInput })}
      readOnly={true}
      hideKeyboardShortcutsPanel={true}
      showClearDates={true}
      startDateId="startDate"
      endDateId="endDate"
      isOutsideRange={() => false}
    /> 
    <DateRangePicker
      startDate={this.state.startDate2}
      endDate={this.state.endDate2}
      onDatesChange={({startDate,endDate}) =>
      this.setState({
          startDate2:startDate,
          endDate2:endDate
        })
      }
      focusedInput={this.state.focusedInput2}
      onFocusChange={focusedInput2 => this.setState({ focusedInput2 })}
      readOnly={true}
      hideKeyboardShortcutsPanel={true}
      showClearDates={true}
      startDateId="startDate2"
      endDateId="endDate2"
      isOutsideRange={() => false}
    />

** проблема была в уничтожении даты, отправленной посылкой, вот рабочая песочница https://codesandbox.io/embed/magical-darkness-jh8kk?fontsize=14&hidenavigation=1&theme=dark

...