In this tutorial, we learn to check if an input date is equal to today's date or not using JavaScript. Sometimes we need to get the user's date from an input field in various formats and check if the input date and today's date match.
Here, we will learn two methods to check if the input date is equal to today's date.
Users can use various methods such as getFullYear(), getMonth() and getDate() to get the complete year, month and date from the timestamp of a Date object. Additionally, we can get the year, month, and date by splitting the user-entered string with a delimiter.
After that, we can compare the year, month, and day of the two timestamps to check whether the input date is equal to today's date.
Users can follow the following syntax to match whether the input date is equal to 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, after splitting the input string with "/", we get an array containing three values. The first value is the year, the second value is the month, and the third value is the day.
Users can follow the following algorithm.
Step 1 - Get the date from the user in a specific format.
Step 2 - Split the date string and extract the year, month and date. Here, we use JavaScript’s split() method to split the date string.
Step 3 - Use the new Date() constructor to create a date equal to today's date.
Step 4 - Extract the year, month and date from today's date using the getFullYear(), getMonth() and getDate() methods.
Step 5 - Compare the year, month and date of the two timestamps. The getMonth() method returns the month between 0 and 11. So we need to compare the month with inputMonth – 1.
Step 6 - If all three properties of both dates match, then the input date is equal to today's date.
In the following example, we create the compareDate() function. When the user presses the submit button and enters a date string in the input field, it calls the compareDate() function.
compareDate() function implements the above algorithm to check whether 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>
We can use the toDateString() method with the timestamp of the Date object, which only returns the date string in the timestamp.
We can create a new timestamp of the Date object using any value obtained from the user input 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.
Finally, we can compare the date strings of the two timestamps.
Users can use the toDateString() method according to the following syntax to check whether 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 a timestamp of the input date using year, month – 1 and date value. Since the Date object has a month value between 0 and 11, we need to provide the month – 1.
The following example gets a date string from the user in a text input field in a specific format. After that, we extract the year, month and date from the string and create a new date.
Next, we compare the date strings of the two 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, the user can observe that entering a date in an invalid format will generate an error in the console.
Users learned two ways to check if a date is equal to today's date. However, users can also use the setHours() method. We can set the hour to 0 in the date object and compare it with today's date to check for equality.
The above is the detailed content of How to check if an input date is equal to today's date using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
