How can I update React Date Picker every time select box is selected

时间:2019-04-16 22:20:26

标签: javascript reactjs momentjs semantic-ui-react react-datepicker

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.

0 个答案:

没有答案