Solution
To compare two dates in React, you can use the JavaScript Date
object with the getTime()
method, and use the comparison operator to compare dates.
Snippet
In this snippet, we will create two date object with getTime()
method, use comparison operator, and print the which date is earlier and letter.
const date1 = new Date('2022-12-15');
const date2 = new Date('2022-12-16');
if (date1.getTime() < date2.getTime()) {
console.log("date1 is earlier than date2");
} else if (date1.getTime() > date2.getTime()) {
console.log("date1 is later than date2");
} else {
console.log("date1 equal to date2");
}
Example
In this example, we will compare two date object, store which date earlier than date, and show in the UI.
Let’s start coding…
import React, { useEffect, useState } from "react";
export default function App() {
const [message, setMessage] = useState("");
useEffect(() => {
const date1 = new Date('2022-12-15');
const date2 = new Date('2022-12-16');
if (date1.getTime() < date2.getTime()) {
// date1 is earlier than date2
setMessage("date1 is earlier than date2");
} else if (date1.getTime() > date2.getTime()) {
// date1 is later than date2
setMessage("date1 is later than date2");
} else {
// date1 equal to date2
setMessage("date1 equal to date2");
}
}, []);
return (
<div className="App">
<h1>{`Date Comparison`}</h1>
<p>{message}</p>
</div>
);
}
Output