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>
)
}
}
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>
)
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.