How to check if the input date is equal to today’s date or not using JavaScript?


We learn to check if the input date is equal to today’s date or not using JavaScript in this tutorial. Sometimes, we need to take the date from users in the input field in various formats and check if input date and today’s date match.

Here, we will learn two approaches to check the equality of the input date with today’s date.

By comparing the year, month, and date separately

Users can get the full year, month, and date from the timestamp of the Date object using various methods such as getFullYear(), getMonth(), and getDate(). Also, we can get the year, month, and date from the string that users give as input by splitting it with a delimiter.

After that, we can compare both timestamps' year, month, and date to check if the input date equals today’s date.

Syntax

Users can follow the syntax below to match the equality of the input date with today’s date.

let inputYear = dateInput.value.split("/")[0];
let inputMonth = dateInput.value.split("/")[1];
let inputDate = dateInput.value.split("/")[2];
if (current_date.getFullYear() == inputYear && current_date.getMonth() == inputMonth - 1 && current_date.getDate(); == inputDate) {
   // date is equal to today’s date
} else{
   // date is not equal to today’s date
}

In the above syntax, we get an array of three values after splitting the input string by ‘/’. The first value is the year, the second is the month, and the third is the date.

Algorithm

Users can follow the below algorithm.

  • Step 1 − Get the date from the user in the particular format.

  • Step 2 − Split the date string and extract the year, month, and date. Here, we have used the split() method of JavaScript to split the date string.

  • Step 3 − Use the new Date() constructor to create a date equal to today’s date.

  • Step 4 − Use the getFullYear(), getMonth(), and getDate() methods to extract the year, month, and date from today’s date.

  • Step 5 − Compare both timestamps' year, month, and date. The getMonth() method returns the month between 0 to 11. So, we need to compare the month with the inputMonth – 1.

  • Step 6 − If all three properties of both dates match, the input date is equal to today’s date.

Example

In the example below, we have created the compareDate() function. When the user presses the submit button and enters the date string in the input field, it invokes the compareDate() function.

The compareDate() function implements the above algorithm to check if the input date is equal to today’s date.

<html>
<body>
   <h3>Comparing the <i>date, month, and year</i> separately to check if input the date is equal to today's date </h3>
   <h4>Enter the date in yyyy/mm/dd format.</h4>
   <input type="text" id="dateInput" />
   <button id = "submit" onclick = "compareDate()"> submit </button>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let dateInput = document.getElementById("dateInput");
      function compareDate() {
         // split the input string
         let inputYear = dateInput.value.split("/")[0];
         let inputMonth = dateInput.value.split("/")[1];
         let inputDate = dateInput.value.split("/")[2];

         let current_date = new Date();
         // get the month, year, and date from the time stamp
         let year = current_date.getFullYear();
         let month = current_date.getMonth();
         let day = current_date.getDate();
         // compare year, month, and date
         if (year == inputYear && month == inputMonth - 1 && day == inputDate) {
            output.innerHTML = "Date is equal to today's date!";
         } else {
            output.innerHTML = "Date is not equal to today's date!";
         }
      }
   </script>
</body>
</html>

Using the toDateString() Method

We can use the toDateString() method with the timestamp of the Date object, which returns only the date string from the timestamp.

We can use whatever values we get from the user input to create a new timestamp of the Date object and get the date string using the toDateString() method. Next, we can also create the current date representing today’s date and use the toDateString() method.

At last, we can compare the date string of both timestamps.

Syntax

Users can follow the syntax below to use the toDateString() method to check if the input is equal to today’s date.

let [year, month, date] = dateInput.value.split(",");
let inputDate = new Date(year, month - 1, date);
let current_date = new Date();
if (inputDate.toDateString() == current_date.toDateString()) {
   // it’s today’s date.
} else {
   // It’s not matching with today’s date
}

In the above syntax, we have created the timestamp of the input date using the year, month – 1, and date values. As the Date object takes values between 0 and 11 for a month, we need to provide month – 1.

Example

The below example takes the date string from the user in the text input field in the particular format. After that, we extracted the year, month, and date from the string and created a new date.

Next, we compared the date string of both timestamps.

<html>
<body>
   <h3>Using the <i> toDateString() </i> method to check if input the date is equal to today's date </h3>
   <h4>Enter the date in yyyy,mm,dd format.</h4>
   <input type = "text" id = "dateInput" />
   <button id = "submit" onclick = "compareDate()"> submit </button>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let dateInput = document.getElementById("dateInput");
      function compareDate() {
         // extract the year, month, and date
         let [year, month, date] = dateInput.value.split(",");
         let inputDate = new Date(year, month - 1, date);
         let current_date = new Date();
         if (inputDate.toDateString() == current_date.toDateString()) {
            output.innerHTML = "Date is equal to today's date!";
         } else {
            output.innerHTML = "Date is not equal to today's date!";
         }
      }
   </script>
</body>
</html>

In the above output, users can observe that entering the date in an invalid format will generate an error in the console.

Users learned two approaches to check if the date is equal to today’s date. However, users can also use the setHours() method. We can set hours to 0 in the date object and compare it with today’s date to check equality.

Updated on: 19-Jan-2023

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements