如何在React中为日期范围选择选择不同的输入

Question

I'm using a simple create-react-app and react-calendar-pane ( https://github.com/brillout/awesome-react-components ) to develop a simple date range selector for a calendar from scratch.

The calendar is being called as a component using:

<Calendar date={moment("23/10/2015", "DD/MM/YYYY")} onSelect={this.onSelect} />

I have two inputs above the calendar; a 'from' and 'to' date inputs:

<label> From <input type="text" onClick={this.onClickFromDate} value={this.state.fromDate.format('DD/MM/YYYY')} /> </label>
<label> To <input type="text" onClick={this.onClickToDate} value={this.state.toDate.format('DD/MM/YYYY')} /> </label>

I'm using onClickFromDate and onClickToDate to invoke a state of activeness of the clicked input. And onSelect to display in the console that a selection from the calendar has been made.

The issue I'm facing is that I can't figure out how to separate the two inputs so that when the 'from' input is clicked on, the user can select a date from the calendar and that date will appear in the 'from', with the same happening with the 'to' input.

As my code is now, when a date is selected from the calendar, both input display the selected date from the calendar, with the clicking on the inputs not doing anything. I understand that is invoked using onSelect={this.onSelect} but I don't know how to differentiate between the two inputs to create a simple date range picker for this calendar.

Full code (App.js):

class App extends React.Component {
  constructor(){
    super();
    this.state={ fromDate:moment(), toDate:moment() };
  }

  onSelect=(e)=>{
    console.log('this is a date being selected');
  }

  onClickFromDate=(e)=>{
    console.log('this is a from date');
  }

  onClickToDate=(e)=>{
    console.log('this is a to date');
  }

  render() {
    return(
      <div>
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <label> From <input type="text" onClick={this.onClickFromDate} value={this.state.fromDate.format('DD/MM/YYYY')} /> </label>
          <label> To <input type="text" onClick={this.onClickToDate} value={this.state.toDate.format('DD/MM/YYYY')} /> </label>
          <Calendar date={moment("23/10/2015", "DD/MM/YYYY")} onSelect={this.onSelect} />
        </div>
      </div>
    )
  }
}

Answer 1

On clicking of select, set clicktype value. Use this value to set the corresponding date in the onselect method

  class App extends React.Component {
  constructor(){
    super();
    this.state={ 
     fromDate:moment(), 
     toDate:moment()  
     clicktype:null //1 for fromdate, 2 for todate  
     };
  }

  onSelect=(e)=>{

    console.log('this is a date being selected');
   if(this.state.clicktype==1){ //set from date  }
    else{ //set to date  }
  }

  onClickFromDate=(e)=>{
    console.log('this is a from date');
    this.setState({ clicktype:1})
  }

  onClickToDate=(e)=>{
    console.log('this is a to date');
    this.setState({ clicktype:2})
  }

  render() {
    return(
      <div>
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <label> From <input type="text" onClick={this.onClickFromDate} value={this.state.fromDate.format('DD/MM/YYYY')} /> </label>
          <label> To <input type="text" onClick={this.onClickToDate} value={this.state.toDate.format('DD/MM/YYYY')} /> </label>
          <Calendar date={moment("23/10/2015", "DD/MM/YYYY")} onSelect={this.onSelect} />
        </div>
      </div>
    )
  }
}