Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to compare only date part without comparing time in JavaScript?
While developing applications, you often need to compare only the date parts of two Date objects, ignoring the time components. For example, in a subscription system, you might want to check if a user's payment was made on or before the subscription deadline, regardless of what time the payment was processed.
In this tutorial, we will learn to compare only the date part without comparing the time in JavaScript.
Using the setHours() Method
The most straightforward approach is to set the time components (hours, minutes, seconds, milliseconds) to zero for both date objects. This ensures that when comparing dates, only the date parts are considered.
Syntax
let date1 = new Date();
date1.setHours(0, 0, 0, 0);
let date2 = new Date("2023-12-25");
date2.setHours(0, 0, 0, 0);
// Comparing the dates
if (date1 > date2) {
// date1 is later than date2
} else if (date1 < date2) {
// date1 is earlier than date2
} else {
// dates are the same
}
Parameters
setHours() ? Takes 4 parameters: hours, minutes, seconds, and milliseconds. Setting all to 0 removes the time component.
Example
<html>
<head>
</head>
<body>
<h2>Comparing only date part of two dates in JavaScript</h2>
<h4>Compare two dates by <i>setting time to 0</i> for both dates</h4>
<p id="output"></p>
<script>
let output = document.getElementById("output");
function compareDates(date1, date2) {
if (date1 < date2) {
output.innerHTML += date1.toDateString() + " is before " + date2.toDateString() + "<br/>";
} else if (date1 > date2) {
output.innerHTML += date1.toDateString() + " is after " + date2.toDateString() + "<br/>";
} else {
output.innerHTML += date1.toDateString() + " is same as " + date2.toDateString() + "<br/>";
}
}
// Create dates with different times
let date1 = new Date();
date1.setHours(0, 0, 0, 0);
let date2 = new Date(2002, 6, 21);
date2.setHours(0, 0, 0, 0);
compareDates(date1, date2);
// Compare same date
let date3 = new Date();
date3.setHours(0, 0, 0, 0);
compareDates(date1, date3);
</script>
</body>
</html>
Using the toDateString() Method
The toDateString() method returns only the date portion as a string. By converting the date to a string and then back to a Date object, the time component is automatically set to midnight (00:00:00).
Syntax
let date1 = new Date().toDateString();
date1 = new Date(date1);
let date2 = new Date("2023-12-25").toDateString();
date2 = new Date(date2);
Example
<html>
<head>
</head>
<body>
<h4>Compare date parts using the toDateString() method</h4>
<p id="output"></p>
<script>
let output = document.getElementById("output");
function compareDates(date1, date2) {
if (date1 < date2) {
output.innerHTML += date1.toDateString() + " is before " + date2.toDateString() + "<br/>";
} else if (date1 > date2) {
output.innerHTML += date1.toDateString() + " is after " + date2.toDateString() + "<br/>";
} else {
output.innerHTML += date1.toDateString() + " is same as " + date2.toDateString() + "<br/>";
}
}
// Convert to date string and back to remove time
let date1 = new Date().toDateString();
date1 = new Date(date1);
let date2 = new Date(2002, 6, 21).toDateString();
date2 = new Date(date2);
compareDates(date1, date2);
// Compare with current date
let date3 = new Date().toDateString();
date3 = new Date(date3);
compareDates(date1, date3);
</script>
</body>
</html>
Comparison of Methods
| Method | Performance | Readability | Use Case |
|---|---|---|---|
setHours(0,0,0,0) |
Better | Clear intent | When you need precise control |
toDateString() |
Slower (string conversion) | Simple | Quick date-only comparisons |
Conclusion
Both methods effectively compare only the date parts by removing time components. The setHours() method is more efficient and gives you direct control, while toDateString() is simpler but involves string conversion overhead.
7K+ Views
