how to add hours to an input time value in react js

Question

I have a reservation form which contains the time of the beginning of the reservation and the period of reservation.

The period will not be sent to the backend only the time of the beginning and the end will be sent, so the end of the reservation will be calculated at the frontend and then it's gonna be sent with the time of beginning.

I'm having a problem with how to add the period to the beginning of reservation with react js.

my code:

function ReservePlace(props) {
    const initialInputValues = {
       period: '',
       beginReservation: ''
    } 
    const [values, setValues] = useState(initialInputValues)
    const handleInputChange = (e) => {
      const name = e.target.name
      const value = e.target.value
      setValues({
        ...values,
        [name]: value,
      })
    }    
    const sendUserReservation = async (e) => {
      e.preventDefault()
      await axios.post('/users/reservation', {
        ...values,
        endReservation: addHours(values.beginReservation, values.period),
      })  
      
      }
    return (
              <form >
                  <label>Enter the reservation start time</label>
                  <input name="beginReservation" value={values.beginReservation} onChange={handleInputChange}  type="time"/>

                  <label>Enter the period</label>
                  <input name="period" value={values.period} onChange={handleInputChange}  type="number" min={1} max={6}  />

                  <button className='btn-reserve' onClick={sendUserReservation}  type="submit" > 
                    Reserve
                  </button>
                </form>
              
    );
}

export default ReservePlace;

Does this answer your question? [How to add hours to a Date object?](https://stackoverflow.com/questions/1050720/how-to-add-hours-to-a-date-object) — Dmitriif, Apr 30 '22 at 13:56
Thanks for your answer, I saw this question before actually i don't want to add hours to the current time i want to take the value of the period input field and then add it to the time value of the beginning reservation input field to have the time of the end of the reservation. — eayar, Apr 30 '22 at 14:04
In order to have the time of the end of the reservation we should add the value from the period input field to the date object of the beginning reservation, shouldn't we? So, we have an initial date object of the start date, we have hours from the period input field and the last piece is to use one of the functions from the [aforementioned topic](https://stackoverflow.com/questions/1050720/how-to-add-hours-to-a-date-object) to calculate the end date and send it to the server. — Dmitriif, Apr 30 '22 at 14:18
endReservation: new Date(values.beginReservation).setHours(new Date(values.beginReservation).getHours()+values.period), — eayar, Apr 30 '22 at 14:24
how can i make new date() understand that {values.beginReservation} is just hours and minutes. — eayar, Apr 30 '22 at 14:32
Sorry, I haven't noticed that we get the start date from an input of type **time**. In this case, the value is of type `string` and not the `object` and we can't use appropriate methods of Date objects. I've added my solution below. — Dmitriif, Apr 30 '22 at 15:31

score 0 · Accepted Answer · answered Apr 30 '22 at 15:29

Since the input of type time returns a value of type string we can split this value and extract hours from it:

time.split(":")[0]

Then we convert this value and the value we get from a period input to type number and make calculations:

const endHours = Number(time.split(":")[0]) + Number(period);

On top of that we check that the result isn't bigger than 24:

const formattedEndHours = endHours >= 24 ? endHours - 24 : endHours;

Afterwards, we create a new string which will be the end of the reservation and we can use this value to send to the server, display in UI etc:

const end = formattedEndHours.toString().concat(":").concat(endMinutes);
setEndOfReservation(end);

The whole code:

const [time, setTime] = useState<any>("");
  const [period, setPeriod] = useState<any>(0);
  const [endOfReservation, setEndOfReservation] = useState<any>("");

  useEffect(() => {
    if (time !== "" && period !== 0) {
      const endHours = Number(time.split(":")[0]) + Number(period);
      const formattedEndHours = endHours >= 24 ? endHours - 24 : endHours;
      const endMinutes = time.split(":")[1];
      const end = formattedEndHours.toString().concat(":").concat(endMinutes);
      setEndOfReservation(end);
    }
  }, [time, period]);

  return (
    <form>
      <div>
        <label>Enter the reservation start time</label>
        <input
          name="beginReservation"
          value={time}
          onChange={(e) => setTime(e.target.value)}
          type="time"
        />
      </div>
      <div>
        <label>Enter the period</label>
        <input
          name="period"
          value={period}
          onChange={(e) => setPeriod(e.target.value)}
          type="number"
          min={1}
          max={6}
        />
      </div>
      <div>
        <p>End of reservation:{endOfReservation}</p>
      </div>
    </form>
  );

Demo

how to add hours to an input time value in react js

1 Answers1