How to check for two timestamps for the same day in JavaScript?


It never happens that you use JavaScript in developing your application, and you don’t use the Date object. The Date object is very important in JavaScript, which allows us to create and manipulate the date according to the developer’s requirements.

In this tutorial, we will learn to check whether two timestamps are for the same or different days. In real-time development, it is very useful. For example, we wanted users to perform some everyday tasks. So, we need to check whether users have performed the task for today, and we can check that by comparing the last date of the task performed and the current date.

Compare the year, month, and date separately of the two Date objects

The Date() object contains the getFullYear(), getMonth(), and getDate() methods to get the year, month, and date from the date value, respectively. We can check if the year, month, and date of both the timestamps are equal; they both are of the same day.

Syntax

Users can follow the syntax below to check for two timestamps for the same day using the getFullYear(), getMonth(), getDate(), and equality operators.

if (
   date1.getFullYear() === date2.getFullYear() &&
   date1.getMonth() === date2.getMonth() &&
   date1.getDate() === date2.getDate()
) {
   
   // date is the same
} else {
   
   // date is not the same
} 

In the above syntax, date1 and date2 are two different timestamps.

Example

In the example below, we have created three dates named date1, date2, and date3. We have created the compareTwoDates() function, which uses the above logic to compare two timestamps for the same day.

<html>
<body>
   <h3>Compare the<i> year, month, and date </i> to check for two timestams of same day.</h3>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      var date1 = new Date();
      var date2 = new Date(date1.getTime() - 3000);
      function compareTwoDates(date1, date2) {
         
         // if the year, month, and date are the same, it means two dates are on the same day
         if (
            date1.getFullYear() === date2.getFullYear() &&
            date1.getMonth() === date2.getMonth() &&
            date1.getDate() === date2.getDate()
         ) {
            output.innerHTML += date1 + " and <br>" + date2 + " <br>are of same day. </br><br>";
         } else {
            output.innerHTML += date1 + " and <br>" + date2 + " <br>are not of same day. </br>";
         }
      }
      compareTwoDates(date1, date2);
      let date3 = new Date(2020, 11, 10);
      compareTwoDates(date1, date3);
   </script> 
</body>
</html>

Set hours, minutes, seconds, and milliseconds to zero and compare two dates

The setHours() method of the Date() object allows us to set the hours, minutes, seconds, and milliseconds in the timestamp. It takes four parameters representing the hour, minute, seconds, and milliseconds. Also, the last three parameters are optional, but we will set them all to zero. When we set hours, minutes, seconds, and milliseconds to zero, we can get the timestamp for the start of the day. If the start of both timestamps is the same, timestamps are of the same day.

Syntax

Follow the syntax below to compare two timestamps for the same day.

date1.setHours(0, 0, 0, 0);
date2.setHours(0, 0, 0, 0);
   
// compare timestamp
if (date1 == date2) {
   
   // date is the same
} else {
   
   // date is not the same
} 

In the above syntax, we compare the date1 and date2 after setting up hours to zero using the setHours() method.

Example

In the example below, we have created two timestamps using the Date() object. The compareTwoDates() function checks if timestamps are of the same day by setting up the hours, minutes, seconds, and milliseconds to zero for both timestamps.

<html>
<body>
   <h3>Seting<i> Hours, minutes, seconds, and milliseconds </i> to zero to check for two timestamps of the same day </h3>
   <p id="output"></p>
   <script>
      let output = document.getElementById("output");
      var date1 = new Date();
      var date2 = new Date(date1.getTime() - 3786000);
      function compareTwoDates(date1, date2) {
         
         // set hours, minutes, seconds, and milliseconds zero in the timestamp
         date1.setHours(0, 0, 0, 0);
         date2.setHours(0, 0, 0, 0);
         
         // compare timestamp
         if (date1 == date2) {
            output.innerHTML += date1 + " and <br>" + date2 + "<br> are of same day. </br>";
         } else {
            output.innerHTML += date1 + " and <br>" + date2 + "<br> are not of same day. </br>";
         }
      }
      compareTwoDates(date1, date2);
   </script>
</body>
</html> 

Use the toDateString() Method

The toDateString() method allows us to get only the date string from the timestamp, and it removes the time from the timestamp and returns only the date string. If the date string of both timestamps is the same, we can say both are of the same day.

Syntax

Follow the syntax below to use the toDateString() method to check for two timestamps of the same day.

if (date1.toDateString() == date2.toDateString()) {
   
   // dates are of the same day
} else {
   
   // dates are not on the same day
} 

Example

In the example below, When a user clicks on the “compare two dates” button, it invokes the isForSameDays() function. Inside the isForSameDays() function, we used the toDateString() method to get only the date string from the timestamp and the equality operator to compare two date strings.

<html>
<body>
   <h3>Using the <i> toDateString() method </i> to check for two timestams of same day.</h3>
   <p id="output"></p>
   <script>
      let output = document.getElementById("output");
      var date1 = new Date();
      var date2 = new Date(2020, 01, 21, 12, 23, 22);
      
      // compare timestamp using the toDateString() method
      if (date1.toDateString() == date2.toDateString()) {
         output.innerHTML += date1 + " and " + date2 + " are of same day. </br>";
      } else {
         output.innerHTML += date1 + " and " + date2 + " are not of same day. </br>";
      }
   </script>
</body>
</html>

This tutorial taught us three approaches to checking for two timestamps on the same day. The third approach using the toDateString() method is a very straightforward and single line of code.

Updated on: 10-Mar-2023

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements