RangeError: Maximum call stack size exceeded While setting min-max date

[jainvizz]

Hi,

I am facing Maximum call stack size exceeded issue while setting min-max date for date picker. I am having two date picker (stare date, end date). When I am selecting start date I am setting mindate for end date picker and when I am selecting end date I am setting maxdate for start date picker.

Provided the sand box for the same.

https://codesandbox.io/s/lrnmx4qppl

Below I am providing the code for the same:

Flatpickr Component

import React, {Component} from 'react';
import Flatpickr from 'react-flatpickr';
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.setDatePickerProps = this.setDatePickerProps.bind(this);

    this.state = {
      selectValue: props.selectValue ? props.selectValue : "",
      options: props.options ? props.options : {},
      placeholder: props.placeholder ? props.placeholder : {}
    };
  }

  componentWillReceiveProps(newProps){
    this.setState({
      selectValue: newProps.selectValue ? newProps.selectValue : "",
      options: newProps.options ? newProps.options : {},
      placeholder: newProps.placeholder ? newProps.placeholder : {}
		});
  }

  setDatePickerProps(propKey, propValue){
    this.refs.refDatePicker.flatpickr.set(propKey, propValue);
  }

  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" ref="refDatePicker" placeholder={this.state.placeholder} options={this.state.options} value={this.state.selectValue} onValueUpdate={this.setDate} />
    );
  }
}

Below is the code for setting min and max date on parent component.

onFilterDateChange(str, date){
    if(str === "start"){
      this.refEndDatePicker.setDatePickerProps("minDate", date[0] ? date[0] : "");
      this.setState({
        objSearch: Object.assign({},this.state.objSearch,{ startDate: date[0] ? date[0] : ""})
      });
    }
    else if(str === "end"){
      this.refStartDatePicker.setDatePickerProps("maxDate", date[0] ? date[0] : "");
      this.setState({
        objSearch: Object.assign({},this.state.objSearch,{ endDate: date[0] ? date[0] : ""})
      });
    }
  }

When I select start date everything works fine but as soon as I select end date after that it shows this error "RangeError: Maximum call stack size exceeded"

Can anyone please help me out with this.

Your Environment flatpickr version used: 3.6.4 Browser name and version: Chrome, Version 70.0.3538.110 (Official Build) (64-bit) OS and version: Windows 10 Pro

[timojokinen]

I had this error too and for me the following was the problem: The value is already set but in the first render it was null so flatpickr just used the current date which for me was BEFORE the minDate I set. That caused the component to not show any date and crash as soon as you try to change it.

[timojokinen]

In general when the value is before the minDate it crashes

[jainvizz]

@timojokinen Can you please let me know how did you fix this?

[timojokinen]

Solve validation in another way. I just removed the minDate property and added my own validation (for Example disabling submit button in a form or adding a red message below the component)