How to check if a date is in the past in React JS?

To check if a date is in the past within a React component, you can use the Date object and React’s state management. Here’s how you can do it:

import React, { useState } from 'react';

function DateChecker() {
  const [inputDate, setInputDate] = useState('');
  const [isPast, setIsPast] = useState(false);

  const checkIfPast = () => {
    const currentDate = new Date();
    const givenDate = new Date(inputDate);

    setIsPast(givenDate < currentDate);
  };

  return (
    <div>
      <input
        type="date"
        value={inputDate}
        onChange={(e) => setInputDate(e.target.value)}
      />
      <button onClick={checkIfPast}>Check</button>
      {isPast ? <p>The date is in the past.</p> : <p>The date is not in the past.</p>}
    </div>
  );
}

export default DateChecker;

In this example, the DateChecker component uses React’s state to manage the input date and the result of whether it’s in the past. The checkIfPast function, triggered by clicking the “Check” button, converts the input date and the current date into Date objects and compares them using the < operator.

The result of the comparison is stored in the isPast state, which is used to conditionally render a message indicating whether the date is in the past or not.

Keep in mind that the JavaScript Date object works in the local time zone of the user’s device. If you need to handle time zones or more complex date-related functionality, consider using a library like date-fns or moment.js.