How to Compare Dates in JavaScript
In Web development it is often useful to compare dates, determining which one is more recent and which is older. Comparing dates with a JavaScript function is straightforward. Even if you have very little experience in JavaScript, programming or Web development in general, you can carry out this task, as the code required for date handling and comparison is short and uncomplicated. Date comparison is a common task, particularly when managing user interaction with elements in a site.
Other People Are Reading
Instructions
-
-
1
Create your Web page. If you do not have a page ready, create one by opening a new file in a text editor and saving it with the ".html" extension. Enter the following outline for your page, which includes a section for JavaScript code in the head area:
<html>
<head>
<script type="text/javascript">
//JavaScript functions here
</script>
</head>
<body>
<!--Content here-->
</body>
</html>
The JavaScript functions will be placed within the script section of the page head, while the page content will be placed between the HTML body tags.
-
2
Enter a JavaScript function to perform the date comparison. Between the opening and closing "script" tags, enter the function outline as follows:
function checkDate() {
//function code here
}
Within the function, you can enter any JavaScript code you like. Find the current date using the following code between the opening and closing function brackets:
var currentDate = new Date();
-
-
3
Create a second date to compare to the current one. Add the following code to the function, creating another Date object, but this time setting it to a specific date:
var comparisonDate = new Date();
comparisonDate.setFullYear(2020, 3, 20);
This code sets the date in the second Date object to the 20th of March 2020. You can experiment by changing this value when the code is complete and you're ready to test it.
-
4
Compare the two dates. Add the following code, comparing the current date with the one outlined in the code:
if(currentDate<comparisonDate)
alert("The date in question has not yet been reached");
else
alert("The date in question has passed");
This simply outputs an alert dialog when the function is called within the page.
-
5
Amend the function to write content into the Web page. Add the following HTML element within the body section of the page:
<div id="result">Comparison result</div>
-
6
Amend the JavaScript function:
if(currentDate<comparisonDate)
document.getElementById("result").innerHTML="The date in question has not yet been reached";
else
document.getElementById("result").innerHTML="The date in question has passed";
-
7
Call the function by altering the opening body tag:
<body onload="checkDate()">
-
8
Save the page and test it by opening it in a Web browser.
-
1
Tips & Warnings
The Date object in JavaScript provides access to many different date functions. When you first create an object, it is automatically set to the current date.
You can compare a date entered by the user by capturing it in an HTML form.
The conditional test is checking whether today's date is less than the specified one; if the dates are the same this test will return false.
