React Js Add Hours to a Date

React Js Add Hours to a Date:Adding hours to a date is a common task when working with dates and times in web applications. React.js provides an efficient and straightforward way to achieve this. In this tutorial, we'll walk you through a simple React.js application that allows you to add hours to a date and see the updated date in real-time

written

reviewed

updated

Adding Hours to a Date in a React js Application

In this example, we'll create a React component called App to manage the date and hours to add.

Create a React Component

  <script type="text/babel">
    const { useState } = React;
    function App() {
      const [initialDate, setInitialDate] = useState(new Date());
      const [hoursToAdd, setHoursToAdd] = useState(1);
      const handleAddHours = () => {
        const newDate = new Date(initialDate);
        newDate.setHours(newDate.getHours() + hoursToAdd);
        setInitialDate(newDate);
      };

      return (
        <div className='container'>
          <h1 className='title'>React js Add Hours to a Date</h1>
          <div>
            <p className='date-paragraph'>Initial Date: {initialDate.toString()}</p>
            <p className='hours-paragraph'>Hours to Add: {hoursToAdd}</p>
            <input
              className='hours-input'
              type="number"
              value={hoursToAdd}
              onChange={(e) => setHoursToAdd(parseInt(e.target.value, 10))}
            />
            <button className='add-hours-button' onClick={handleAddHours}>Add Hours</button>
          </div>
        </div>

      );
    }

    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

In this code snippet, a React functional component App is defined. It uses the useState hook to manage the initial date and the number of hours to add. When the user clicks the "Add Hours" button, the handleAddHours function is triggered. This function creates a new date object, adds the specified number of hours to it, and updates the state with the new date.

Step-by-Step Guide

The useState hook is used to manage the initial date and the hours to add. The initialDate state is initialized with the current date and time, and hoursToAdd is initialized with 1.

const [initialDate, setInitialDate] = useState(new Date());
const [hoursToAdd, setHoursToAdd] = useState(1);

2. Handling Input Changes

An input field is provided for the user to enter the number of hours to add. An onChange event handler updates the hoursToAdd state whenever the input value changes.

<input
  className='hours-input'
  type="number"
  value={hoursToAdd}
  onChange={(e) => setHoursToAdd(parseInt(e.target.value, 10))}
/>

3. Adding Hours to the Date

When the user clicks the "Add Hours" button, the handleAddHours function is called. It creates a new date object based on the initial date, adds the specified number of hours to it, and updates the state with the new date

const handleAddHours = () => {
  const newDate = new Date(initialDate);
  newDate.setHours(newDate.getHours() + hoursToAdd);
  setInitialDate(newDate);
};

4. Displaying the Updated Date

The updated date is displayed in the component. Whenever the user clicks the "Add Hours" button, the initial date is updated, and the new date is displayed in the paragraph with the class date-paragraph.

<p className='date-paragraph'>Initial Date: {initialDate.toString()}</p>

Output of this Code

Pasted Image

Conclusion

Adding hours to a date in React.js is straightforward with the Date object and the useState hook. By following this guide, you can easily implement this functionality in your React.js applications.

React JS Tutorial