Calculate hour between two times in reactJs

Question

I'm building an HR functionality, so there is a two field here is the start time and end time, if the user gives time from two input then there is another field minimum working hour,

so, I want the user can't give working hours more than the start time and end time, I have tried many ways, also tried with moment, but I can't get any exact answer.

here is my three input field:

<div className="col-xl-3 col-lg-4 col-md-6">
                        <div className="d-flex">
                          <label>Start Time</label>
                          <Required />
                        </div>
                        <Input
                          style={{ marginBottom: "8px", fontSize: "12px" }}
                          value={values?.startTime}
                          name="startTime"
                          type="time"
                          className="form-control"
                          placeholder="Start Time"
                          errors={errors}
                          touched={touched}
                          onChange={(e) =>
                            setFieldValue("startTime", e.target.value)
                          }
                        />
                      </div>
                      <div className="col-xl-3 col-lg-4 col-md-6">
                        <div className="d-flex">
                          <label>End Time</label>
                          <Required />
                        </div>
                        <Input
                          style={{ marginBottom: "8px", fontSize: "12px" }}
                          value={values?.endTime}
                          name="endTime"
                          type="time"
                          className="form-control"
                          placeholder="End Time"
                          errors={errors}
                          touched={touched}
                          onChange={(e) =>
                            setFieldValue("endTime", e.target.value)
                          }
                        />
                      </div>
                      <div className="col-xl-3 col-lg-4 col-md-6">
                        <div className="d-flex">
                          <label>Minimum Working Hour</label>
                          <Required />
                        </div>
                        <Input
                          style={{ marginBottom: "8px", fontSize: "12px" }}
                          value={values?.minimumWorkingHour}
                          name="minimumWorkingHour"
                          type="number"
                          className="form-control"
                          placeholder="Minimum Working Hour"
                          errors={errors}
                          touched={touched}
                          onChange={(e) =>
                            setFieldValue("minimumWorkingHour", e.target.value)
                          }
                        />
                      </div>

start time, end time, and minimum working hours

actually, i want the user can't give input more than the calculated start time and end time

Answer 1

If I understand the question correctly, then you should find the difference between the provided input fields start time and end time

const timeDiff = starttime - endtime
const isTimeValid = timeDiff > minimumWorkingHours

if (!isTimeValid) {
  // return with error
}