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

To check if a date is in the future in 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 [isFuture, setIsFuture] = useState(false);

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

    setIsFuture(givenDate > currentDate);
  };

  return (
    <div>
      <input
        type="date"
        value={inputDate}
        onChange={(e) => setInputDate(e.target.value)}
      />
      <button onClick={checkIfFuture}>Check</button>
      {isFuture ? <p>The date is in the future.</p> : <p>The date is not in the future.</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 future. The checkIfFuture 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 isFuture state, which is used to conditionally render a message indicating whether the date is in the future 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.