React Js Compare Two Dates | Current Date

    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>

​

    <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>

​

    <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>