Handling multiple date-ranges in a single parent

I’m using react-dates in an advanced search component that incorporates multiple date-range fields.

I’m trying to figure out the best way to detect which of the date-range pickers is being changed and handle the event accordingly in the onFocusChange and onDateChange callbacks without writing a separate handler with superficial differences to target the appropriate attribute for each instance of the component.

Is there a way to access the event target within the defined callbacks?

I’m imagining something along the lines of:

onFocusChange(event, focusedInput){
    var newState = object.assign({}, this.state);
    newState[event.target.id].focusedInput = focusedInput;
    this.setState(newState);
}

But maybe it would be a better approach to store another variable on the state which stores the focused date-range picker?

Any insight would be greatly appreciated!

Update: I’ve written a closure to return a case-specific handler for each field which is adequate to my use case, but I am still curious if it’s possible to access the source event.

[munkhjin0223]

I am using multiple DateRangePicker that dynamically added in single page. There is another solution.

constructor(props) {
    super(props);
    this.onDatesChange = this.onDatesChange.bind(this);
    this.onFocusChange = this.onFocusChange.bind(this);
    this.state = {
      startDate: {},
      endDate: {},
      focusedInput: {},
    };
  }

// id is unique value for each instance and you can define it
onDatesChange(id, { startDate, endDate }) {
    const start = this.state.startDate;
    const end = this.state.endDate;
    start[id] = startDate;
    end[id] = endDate;
    this.setState({
      startDate: start,
      endDate: end,
    });
  }

  onFocusChange(id, value) {
    const focusedInput = this.state.focusedInput;
    focusedInput[id] = value;
    this.setState({
      focusedInput,
    });
  }

<DateRangePicker
                    startDate={this.state.startDate[id]}
                    endDate={this.state.endDate[id]}
                    onDatesChange={({ startDate, endDate }) => this.onDatesChange(id, { startDate, endDate })}
                    focusedInput={this.state.focusedInput[id]}
                    onFocusChange={(focusedInput) => this.onFocusChange(id, focusedInput)}
                  />

[andosteinmetz]

Hi @tyleralves , My solution was to write a closure that returns a function specific to the active react dates instance.

In my case there was one instance to set a range for when a record was created, and another range for the date the record was most recently modified: called ‘created’ and ‘changed’.

Here are my two handler functions for focus and date changes respectively:

function handleFocusChange(attr){
    return function(focusedInput){
        var dates = this.state[attr];
        dates.focusedInput = focusedInput;
        let newState = {};
        newState[attr] = dates;
        this.setState(newState);
    }
}

function handleDatesChange(attr){
    return function({startDate, endDate}){
        var dates = this.state[attr];
        dates.startDate = startDate;
        dates.endDate = endDate;
        startDate ? dates.gte = startDate.format('YYYY[-]MM[-]DD') : delete dates.gte;
        endDate ? dates.lte = endDate.format('YYYY[-]MM[-]DD') : delete dates.lte;
        let newState = {};
        newState[attr] = dates;
        this.setState(newState);
    }
}

and here’s how I used it in my component:

class MyComponent extends React.Component
{
    constructor(props){
        super(props);
        this._onCreatedFocusChange = handleFocusChange('created').bind(this);
        this._onCreatedDatesChange = handleDatesChange('created').bind(this);
        this._onUpdatedFocusChange = handleFocusChange('changed').bind(this);
        this._onUpdatedDatesChange = handleDatesChange('changed').bind(this);
    }

and then in the ReactDates instances:

render(){
        const createdRange = (
            <div className="date-range">
                <DateRangePickerField
                    isOutsideRange = {() => false }
                    showClearDates = {true}
                    label = 'Created:'
                    focusedInput = {this.state.created.focusedInput}
                    startDate = {this.state.created.startDate}
                    endDate = {this.state.created.endDate}
                    onDatesChange = {this._onCreatedDatesChange}
                    onFocusChange = {this._onCreatedFocusChange}
                />
            </div>
        );

        const changedRange = (
            <div className="date-range">
                <DateRangePickerField 
                    isOutsideRange = {() => false}
                    showClearDates = {true}
                    label = 'Updated:'
                    focusedInput = {this.state.changed.focusedInput}
                    startDate = {this.state.changed.startDate}
                    endDate = {this.state.changed.endDate}
                    onDatesChange = {this._onUpdatedDatesChange}
                    onFocusChange = {this._onUpdatedFocusChange}
                />
            </div>
        );

Hope this is helpful in your case as well!