React Js Compare Time String

React Js Compare Two Time Strings in the format HH:MM:SS:Time comparison is a crucial task in many applications, especially those dealing with scheduling, alarms, or any time-sensitive events. In React.js, comparing time strings in different formats, specifically the 12-hour and 24-hour formats, can be achieved through various techniques. In this comprehensive guide, we will explore two React.js examples that demonstrate how to compare time strings effectively, covering both 12-hour and 24-hour time formats.

written

reviewed

updated

24-Hour Format Time Comparison

Let's begin by dissecting the first React.js example, which demonstrates comparing time strings in the 24-hour format. In this example, a React functional component is created using the useState hook to manage the time strings. The component, named App, comprises two input fields where users can input time in the format HH:MM:SS. The compareTimes function is utilized to compare the inputted times, and the result is displayed dynamically on the page.

The logic inside the compareTimes function is relatively straightforward. It checks whether time1 is earlier, later, or equal to time2. If time1 is earlier, the component displays a message indicating that. If time1 is later, it shows a corresponding message. Lastly, if the times are equal, the component informs the user about that equality

React Compare Time String | 24 Hours Format

  <script type="text/babel">
    const { useState } = React;
    function App() {
      const [time1, setTime1] = useState('10:30:45');
      const [time2, setTime2] = useState('12:15:30');
      const [result, setResult] = useState(null);
      const compareTimes = () => {
        if (time1 < time2) {
          setResult(`${time1} is earlier than ${time2}`);
        } else if (time1 > time2) {
          setResult(`${time1} is later than ${time2}`);
        } else {
          setResult(`${time1} is equal to ${time2}`);
        }
      };

      return (
        <div className='container'>
          <h3 className='title'>React Js Compare Time String 24 Hours Format</h3>
          <input type="text" className='input' value={time1} onChange={(e) => setTime1(e.target.value)} />
          <input type="text" className='input' value={time2} onChange={(e) => setTime2(e.target.value)} />
          <button className='button' onClick={compareTimes}>Compare Times</button>
          <p className='result'>{result}</p>
        </div>

      );
    }

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

Run

Output of React Compare Time String

12-Hour Format Time Comparison

Moving on to the second example, it showcases comparing time strings in the 12-hour format. Here, the App component contains a compareTimes function that takes two time strings (time1 and time2) as parameters. Inside this function, the inputted times are transformed into JavaScript Date objects. This transformation involves appending a common date (e.g., '2000-01-01') to the time strings. The resulting Date objects are then compared, and the appropriate comparison result is returned.

React Compare Time String | 12 Hours Format

  <script type="text/babel">
    function App() {
      const compareTimes = (time1, time2) => {
        const date1 = new Date(`2000-01-01 ${time1}`);
        const date2 = new Date(`2000-01-01 ${time2}`);

        if (date1 < date2) return 'Time 1 is earlier than Time 2';
        if (date1 > date2) return 'Time 1 is later than Time 2';
        return 'Time 1 is the same as Time 2';
      }
      const time1 = '2:30 AM';
      const time2 = '11:45 AM';
      const comparisonResult = compareTimes(time1, time2);

      return (
        <div className="container">
          <h3 className="title">React Js Compare Time String in 12 Hours Format</h3>
          <p className="time">Time 1: {time1}</p>
          <p className="time">Time 2: {time2}</p>
          <p className="result">Comparison Result: {comparisonResult}</p>
        </div>
      );
    }

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

Run

Pasted Image