How to compare only date part without comparing time in JavaScript?


While developing the applications, sometimes it needs to compare the only date. For example, you are developing some apps in which users must adhere to the deadline and pay for the subscription. If the user pays at any time on or before the end date of the subscription, the user will be able to use the subscription continues. Otherwise, you need to stop the subscription.

In this tutorial, we will learn to compare only the date part without comparing the time in JavaScript.

In the above cases, we need to compare the two dates without focusing on the time.

Approach 1: Using the setHours() Method

The simple logic to compare the only date parts is that remove the time from both date objects or set the time to 0. Here, we will create new dates and set their time to 0 so that when we make a comparison between the dates, it will compare the date part only as the time of both dates will be the same.

Syntax

Users can follow the below syntax to create new date objects and set the time to 0 for them.

let date1 = new Date();
date1.setHours(0, 0, 0, 0);
let date2 = new Date( Date );
date2.setHours(0, 0, 0, 0);

We can use the following syntax to compare the two dates.

// comparing the dates
if( date1 > date2 ) {
   // do something
} else if ( date1 < dae2 ) {
   // write some code
} else {
   // date is same
}

Parameters

  • Date − The date objects take the date as a parameter for that date, we want to initialize the new object of the Date() class.

  • The setHours() method takes 4 parameters, which are hours, minutes, seconds, and milliseconds respectively. We will set all to 0 on both dates.

Example

In the example below, we have created two new dates using the Date() class. After that, we have set hours 0 for both dates. We have created the function to compare the dates, which prints different outputs according to the date comparison. We have taken different dates to compare and observe the results in the example below.

<html> <head> </head> <body> <h2>Comparing only date part of two dates JavaScript.</h2> <h4>compare two date by <i>setting up time 0</i> to the both dates.</h4> <p id = "output"></p> <script> let output = document.getElementById("output"); function compareDates( date1, date2 ) { if ( date1 < date2 ) { output.innerHTML += date1 + " is behind the " + date2 + " <br/> "; } else if ( date1 > date2 ) { output.innerHTML += date2 + " is behind the " + date1 + " <br/> "; } else { output.innerHTML += date1 + " is same as " + date2 + " <br/> "; } } // calling the function for different expressions output.innerHTML += "<br/>"; let date1 = new Date(); // setup time 0 date1.setHours(0, 0, 0, 0); let date2 = new Date(2002, 06, 21); date2.setHours(0, 0, 0, 0); compareDates(date1, date2); output.innerHTML += "<br/>"; date2 = new Date(); date2.setHours(0, 0, 0, 0); compareDates(date1, date2); </script> </body> </html>

We have set hours to 0 to compare the only date parts in JavaScript. However, users can extract the year, month, and date from the date object and compare them separately.

Approach 2: Using the toDateString() Method

The toDateString() method can be used to return the only date part of a JavaScript date. It returns the date part as a string. We can’t compare the string as date so we need to convert this string back to date. Now it sets the date with the time part to zero.

Syntax

We can apply the syntax to convert a date to date string and then convert back to date.

let date1 = new Date().toDateString();
date1 = new Date(date1)

Example

In the example below, we create two dates and then convert them to strings using toDateString(). Then again convert these strings back to date. Now we compare these dates.

<html> <head> </head> <body> <h4>Compare two date part only 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 + " is behind the " + date2 + "<br/> "; } else if (date1 > date2) { output.innerHTML += date2 + " is behind the " + date1 + "<br/> "; } else { output.innerHTML += date1 + " is same as " + date2 + " <br/>"; } } output.innerHTML += "<br/>"; let date1 = new Date().toDateString(); date1 = new Date(date1) let date2 = new Date(2002, 06, 21).toDateString(); date2 = new Date(date2) compareDates(date1, date2); output.innerHTML += "<br/>"; date2 = new Date().toDateString(); date2 = new Date(date2) compareDates(date1, date2); </script> </body> </html>

Updated on: 23-Aug-2022

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements