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 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.
Method 1: Comparing 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
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
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>
Method 2: 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
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>
Comparison of Methods
| Method | Pros | Cons | Best For |
|---|---|---|---|
| Manual Comparison | Full control over validation | More code, error-prone | Custom date formats |
| toDateString() | Cleaner, handles time zones | Less flexible with formats | Standard date comparison |
Key Points
- Remember that getMonth() returns values from 0-11, so subtract 1 when comparing with user input
- The toDateString() method is more reliable as it handles time zones automatically
- Always validate user input format before processing to avoid errors
Conclusion
Both methods effectively check if an input date matches today's date. Use the toDateString() method for simplicity and reliability, or manual comparison when you need custom date format handling.
2K+ Views
