How to check if one date is between two dates in JavaScript?

Javascript Web Development Front End Technology

In JavaScript, we can use the Date() object to create different timestamps. Also, we may be required to check if one date is between two using JavaScript.

For example, we want to create a filter for orders in the eCommerce application based on the dates. So, we should be able to filter all orders between the two dates that users enter into the date input field.

Another real-world use case of checking one date between two is in the banking application. For example, while developing the banking system application, developers need to create a filter allowing users to sort all transactions between two dates.

By comparing the dates, check if one date is between the other two dates

In JavaScript, we can compare the two instances of the date object. When we compare the two instances of the Date object, it compares the total milliseconds till both dates starting from 1^st January 1970.

So, we can compare two dates normally as we compare number values in JavaScript and can ensure that one date is between the other two dates.

Syntax

Users can follow the syntax below to ensure that one date is between two in JavaScript.

if (date1 < date2 && date2 < date3) {
   
   // date2 is between the date1 and date3
} else {
   
   // date2 is not between the date1 and date3
 }

In the above syntax, users can see that if date2 is greater than date1 and date2 is less than date3, that means date2 is between date1 and date3.

Example

In the example below, we have created three different timestamps using the Date object’s constructor. After that, we used the logic explained in the above syntax to check if the date2 is between date1 and date3.

In the output, users can observe that the date2 is between the date1 and date3.

<html>
<body>
   <h2><i>Comparing the dates</i> to check if one date is between two.</h2>
   <p id="output"> </p>
   <script>
      let output = document.getElementById("output");
      let date1 = new Date(2020, 03, 11);
      let date2 = new Date(2022, 03, 12);
      let date3 = new Date();
      if (date1 < date2 && date2 < date3) {
         output.innerHTML += date2 + " is between <br> " + date1 + " <br> and <br> " + date3;
      } else {
         output.innerHTML += date2 + " is not between the " + date1 + " <br> and <br>" + date3;
      }
   </script>
</body>
</html>

Create a new date from the random date string, and compare them

Now, let’s think about the scenario in which we haven’t given the timestamp of the standard date object, but the date is formatted in the string format. So, we have to extract the year, month, and day from the date string. After that, we need to create a standard time stamp of the values we got from the string and compare them as we have done in the above section.

Syntax

Users can follow the syntax below to check if one date is between two when the randomly formatted string is given.

// splitting the dates
let [year1, month1, date1] = prev_date.split(",");
let [year2, month2, date2] = current_date.split(",");
let [year3, month3, date3] = final_date.split(",");

// creating new formatted dates
prev_date = new Date(year1, month1 - 1, date1);
current_date = new Date(year2, month2 - 1, date2);
final_date = new Date(year3, month3 - 1, date3);
if (prev_date < current_date && current_date < final_date) {

   // current_date is between the prev_date and final_date
} else{
   
   // current_date is not between the prev_date and final_date
}

In the above syntax, we have used the ‘,’ delimiter to split the string, but users can take it according to the given date string. After that, we destructured the array that we got from the split method and used that value to create new standard date timestamps.

Example

In this example, we have taken three date strings. Next, we splited them, got the year, month, and date values, and used them to create new dates.

After that, we compared the new timestamps to ensure that the current_date is between the prev_date and the final_date.

<html>
<body>
   <h3>Create a new date from <i> date string and compare them </i> to check if one date is between two</h3>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let prev_date = "2022,10,23";
      let current_date = "2021,11,22";
      let final_date = "2023,12,30";
      let [year1, month1, date1] = prev_date.split(",");
      let [year2, month2, date2] = current_date.split(",");
      let [year3, month3, date3] = final_date.split(",");
      prev_date = new Date(year1, month1 - 1, date1);
      current_date = new Date(year2, month2 - 1, date2);
      final_date = new Date(year3, month3 - 1, date3);
      if (prev_date < current_date && current_date < final_date) {
         output.innerHTML += current_date + " is between <br>" + prev_date + "<br> and <br> " + final_date;
      } else {
         output.innerHTML += current_date + " is not between <br>" + prev_date + " <br> and <br> " + final_date;
      }
   </script>
</body>
</html>

Users learned two approaches to check if the date is between the other two dates. When standard timestamps of the Date object are given, users can use the first approach; Otherwise, users can extract the different values from the date string and use them to create a new instance of the date object and compare them.