How would I compare two dates in a form and validate them? The second one shouldn't be before the first one

user_14241311 0
Viewed 479

I am trying to build a form in React with Bootstrap. I have two dates (one is when you started to work and the other is when you ended to work for company), the second one shouldn't be before the first one. So if the first one is 10.1.2020, you shoudn't be able to choose the date in the second one that is before this date.

As is a react app, I am also giving you a link: https://codesandbox.io/s/friendly-worker-nwtgu?file=/package.json

Code that I am interested in is inside these components: Practical and PracticalForm.

Code of form:

        <Form.Group controlId="formBasicDateFrom">
          <Form.Label>Worked from</Form.Label>
          <Form.Control
            onChange={(e) => {
              checkDate(e);
              handleChange(e);
            }}
            type="date"
            defaultValue={dateFrom}
            name="dateFrom"
            required
          />
        </Form.Group>
        <Form.Group controlId="formBasicDateUntil">
          <Form.Label>Worked to</Form.Label>
          <Form.Control
            isInvalid={validate}
            onChange={(e) => {
              checkDate(e);
              handleChange(e);
            }}
            // onChange={(e) => {
            //   handleChange(e);
            //   checkDate();
            // }}
            type="date"
            defaultValue={dateTo}
            name="dateTo"
            required
          />
          <Form.Control.Feedback type="invalid">
            Date must be later then date from when you worked...
          </Form.Control.Feedback>
        </Form.Group>

And the function I validate with, now looks like this:

checkDate = (event) => {
    let d1 = new Date(this.state.dateFrom);
    let d2 = new Date(this.state.dateTo);

    if (d1.getTime() > d2.getTime()) {
      this.setState({
        validate: false,
      });
    } else {
      this.setState({
        validate: true,
      });
    }
    console.log(d1.getTime());
    console.log(d2.getTime());
    console.log(this.state.validate);
  };
reactjs validation forms javascript
1 Answers

You can move the checkDate(event) function inside this.setState of handleChange function because the things acts async here so while setting the state you can call the checkDate(event) like,

  handleChange = (event) => {
    this.setState(
      {
        [event.target.name]: event.target.value
      },
      () => {
        this.checkDate(event);
      }
    );
  };

Then modify the checkDate function like,

  checkDate = async (event) => {
    let d1 = new Date(this.state.dateFrom);
    let d2 = new Date(this.state.dateTo);

    if (d1.getTime() < d2.getTime()) {
      this.setState({
        validate: false
      });
    } else {
      this.setState({
        validate: true
      });
    }
    console.log(d1.getTime());
    console.log(d2.getTime());
    console.log(this.state.validate);
  };

Also change the condition,

d1.getTime() > d2.getTime() to d1.getTime() < d2.getTime() as d1 date should be lesser than d2 date always...

Edit red-moon-1e7ri

user_77853370
Related