I have a requirement to allow a user to update the initial start date
and end date
and that be calculated into a number of days
value between the start date
and end date
. For instance if the start date
is 04/18/19
and the end date
is 4/20/19
the number of days is 2
. So I want this auto updated in my React
component.
import React, { Component } from 'react';
import moment from 'moment-timezone';
import DatePicker from 'react-datepicker';
import {Form, Dropdown} from 'semantic-ui-react';
class ReviewerRequirements extends Component {
state = {
startDate: null,
endData: null,
numOfDaysForReview: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
};
componentDidMount = () => {
const { startDate, endDate } = this.state;
const daysTotal = moment(endDate).diff(startDate, 'days');
this.setState({
reviewerSearch: {
numOfDaysForReview: daysTotal,
},
});
};
handleSearchFilterChange = (e, { name, value }) => {
this.setState({
numOfDaysForReview: { ...this.state.numOfDaysForReview, [name]: value },
});
};
handleStartDateChange = () => {}
handleEndDateChange = () => {}
render() {
const {
startDate,
endDate,
numOfDaysForReview,
} = this.state;
return (
<div className="ui grid">
<div className="four wide column">
<Form.Field
name="numOfDaysForReview"
label=""
placeholder="Enter # of days"
value={numOfDaysForReview}
onChange={this.handleSearchFilterChange}
category={'numOfDaysForReview'}
control={AmsLookupDropdown}
fluid
search
selection
/>
</div>
<div className="six wide column">
<Form.Field
name="startDate"
control={DatePicker}
placeholder="Please select start Date"
sClearable={true}
selected={startDate && startDate}
selectsStart
minDate={moment()}
startDate={startDate && startDate}
onChange={this.handleStartDateChange}
/>
</div>
<div className="six wide column">
<Form.Field
name="endDate"
control={DatePicker}
placeholder="Please select end date"
isClearable={true}
selected={endDate && endDate}
selectsEnd
startDate={startDate && startDate}
minDate={startDate && startDate}
endDate={endDate}
onChange={this.handleEndDateChange}
/>
</div>
</div>
);
};
}
So I want the numOfDaysForReview
to automatically update to the correct number of days between the startDate
and endDate
when either of the DatePicker's
change.
And I want the endDate
DatePicker to change when the value of numOfDaysForReview
changes.