React Js Compare Two Dates | Current Date

Compare dates in React or JavaScript. Whether you want to check if a date is in the past, present, or future, or if you want to calculate the difference between two dates, understanding how to compare dates in JS is crucial. There are various methods to compare dates in JavaScript, including using the built-in Date object or the React framework. In this article, we will explore some of the methods and provide examples of comparing dates in JavaScript, particularly in React

written

reviewed

updated

How to Compare Dates in React?

React Js Compare Two Dates:In React.js, comparing dates typically involves using JavaScript's built-in Date object. You can create Date instances for the two dates you want to compare and then use comparison operators like <, >, or === to determine their relationship. For example, you can check if one date is greater than another to see if it occurs after it.

React Js Compare Two Dates Example

  <script type="text/babel">
    const { useState } = React;

    function App() {
      const [date1, setDate1] = useState('');
      const [date2, setDate2] = useState('');
      const [result, setResult] = useState('');

      const handleDateChange = (event, setter) => {
        setter(event.target.value);
      }
      const compareDates = () => {
        const timestamp1 = Date.parse(date1);
        const timestamp2 = Date.parse(date2);

        if (isNaN(timestamp1) || isNaN(timestamp2)) {
          setResult('Invalid date format');
        } else if (timestamp1 === timestamp2) {
          setResult('Dates are equal');
        } else if (timestamp1 < timestamp2) {
          setResult('Date 1 is earlier than Date 2');
        } else {
          setResult('Date 1 is later than Date 2');
        }
      }

      return (
        <div className="container">
          <h3>React Js Compare Two Dates</h3>
          <label>Date 1:</label>
          <input type="date" value={date1} onChange={(e) => handleDateChange(e, setDate1)} />

          <label>Date 2:</label>
          <input type="date" value={date2} onChange={(e) => handleDateChange(e, setDate2)} />

          <button onClick={compareDates}>Compare Dates</button>

          <p>{result}</p>
        </div>
      );
    }

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

Run

Output of Compare two Dates in React js

Date Comparison in Javascript Example

Javascript Compare Dates Example

<body>

    <h2>Javascript Compare Dates</h2>

    <p>Date 1: <span id="date1">2022-01-01</span></p>
    <p>Date 2: <span id="date2">2022-02-01</span></p>

    <button onclick="compareDates()">Compare Dates</button>

    <p id="result"></p>

    <script>
        function compareDates() {
            const date1 = new Date(document.getElementById('date1').textContent);
            const date2 = new Date(document.getElementById('date2').textContent);

            let resultMessage;

            if (date1 < date2) {
                resultMessage = 'date1 is earlier than date2';
            } else if (date1 > date2) {
                resultMessage = 'date1 is later than date2';
            } else {
                resultMessage = 'Both dates are equal';
            }

            document.getElementById('result').textContent = resultMessage;
        }
    </script>

</body>

Run

Output of Javascript Compare Two Dates

Pasted Image

How to Compare Date with Current Date in Javascript?

Compare dates with the current date in JavaScript. This can be useful for validating user input, checking expiration dates, scheduling events, and more. Then, compare them using comparison operators. In this article, we will show you how to compare dates with the current date in JavaScript using different methods and examples

<body>

    <h2>Date Comparison with Current Date in Javascript</h2>

    <p>Current Date: <span id="currentDate"></span></p>
    <p>Selected Date: <span id="selectedDate">2025-01-01</span></p>

    <button onclick="compareWithCurrentDate()">Compare with Current Date</button>

    <p id="result"></p>

    <script>
        function compareWithCurrentDate() {
            const currentDateElement = document.getElementById('currentDate');
            const selectedDateElement = document.getElementById('selectedDate');
            const resultElement = document.getElementById('result');

            const selectedDate = new Date(selectedDateElement.textContent);
            const currentDate = new Date();

            currentDateElement.textContent = currentDate.toDateString();

            let resultMessage;

            if (selectedDate < currentDate) {
                resultMessage = 'Selected date is in the past';
            } else if (selectedDate > currentDate) {
                resultMessage = 'Selected date is in the future';
            } else {
                resultMessage = 'Selected date is today';
            }

            resultElement.textContent = resultMessage;
        }

        // Call the function to display the current date initially
        compareWithCurrentDate();
    </script>

</body>

Run

Releated Tutorials

👉 Vue Js Compare Two Dates

React JS Tutorial