In the preceding section, we examined the various date methods along with the corresponding constructors.
In this section, we will utilize those techniques to understand how to compare dates effectively.
Basically, there are different ways by which we can compare dates, such as:
- Comparing two dates with one another.
- Comparing date with time.
- Comparing dates using getTime
Comparing two dates with one another
Example:
<html>
<head> Comparing Dates</br></head>
<body>
<script>
function compare()
{
var d1=new Date('2020-01-23'); //yyyy-mm-dd
var d2=new Date('2020-01-21'); //yyyy-mm-dd
if(d1>d2)
{
document.write("True, First date is greater than second date");
}
else if(d1<d2)
{
document.write("False, Second date is smaller than the first");
}
else
{
document.write("Both date are same and equal");
}
}
compare(); //invoking compare()
</script>
</body>
</html>
Comparing date with time
Illustration 1: Evaluating dates that include varying time components.
<html>
<head> Comparing Date and time</br></head>
<body>
<script>
var d1=new Date("Apr 17, 2019 12:10:10"); //mm dd, yyyy hh:mm:ss
var d2=new Date("Dec 1, 2019 12:10:30"); //mm dd, yyyy hh:mm:ss
if(d1>d2)
{
document.write("False, d1 date and time is smaller than d2 date and time");
}
else if(d1<d2)
{
document.write("True, d2 is greater in terms of both time and date");
}
else
{
document.write("Both date and time are same and equal");
}
</script>
</body>
</html>
Example 2: Evaluating identical dates with different times.
<html>
<head> Comparing same date but different time</br></head>
<body>
<script>
var d1=new Date("2018-01-10, 12:10:10"); //yyyy-mm-dd hh:mm:ss
var d2=new Date("2018-01-10, 12:10:50"); //yyyy-mm-dd hh:mm:ss
if(d1>d2)
{
document.write("False, d1 & d2 dates are same but d2 time is greater than d1 time");
}
else if(d1<d2)
{
document.write("True, d2 time is greater than d1 time.");
}
else
{
document.write("Both date and time are same and equal");
}
</script>
</body>
</html>
Comparing date with getTime
An improved method for comparing dates is to utilize the getTime function. This function facilitates the conversion of a date into a numeric value, allowing for direct comparisons between different dates.
Example 1: Evaluating the present date and time against a specified date and time.
<html>
<head> Comparing Dates</br></head>
<body>
<script>
var d1=new Date("2019-10-10, 10:10:10"); //yyyy-mm-dd hh:mm:ss
var currentdate=new Date(); //fetch the current date value
if(d1.getTime()<currentdate.getTime())
{
document.write("True, currentdate and time are greater than d1");
}
else if(d1.getTime()>currentdate.getTime())
{
document.write("False");
}
else
{
document.write("True, equal");
}
</script>
</body>
</html>
Example 2: Evaluating two distinct dates that have varying times.
<html>
<head> Comparing Dates</br></head>
<body>
<script>
var d1=new Date("2019-10-10, 10:10:10");
var d2=new Date("2019-11-02, 14:19:05");
if(d1.getTime()<d2.getTime())
{
document.write("True, d1 date and time are smaller than d2 date and time");
}
else if(d1.getTime()>d2.getTime())
{
document.write("False, d2 date and time are greater than d1");
}
else
{
document.write("True, d1 and d2 have same time and date");
}
</script>
</body>
</html>
Thus, we can compare dates in many possible ways.
Changing Date Format
It is also possible to modify or specify the format using JavaScript code. The functions getFullYear, getMonth, and getDate enable us to adjust the date format as needed.
Example1: Modifying the date format to 'yyyy-mm-dd'.
<html>
<head> <h3>Changing date format</h3></br></head>
<body>
<script>
var current_date=new Date(); //fetches current date
var set_to=current_date.getFullYear()+"-"+(current_date.getMonth()+1)+"-"+current_date.getDate();
document.write("The format followed is yyyy-dd-mm: "+set_to);
</script>
</body>
</html>
Additionally, we have the ability to customize the date and time format to suit our requirements.
Example 2: Modifying the datetime representation to 'yyyy-dd-mm hh:mm:ss'.
<html>
<head> <h3>Changing date format</h3></br></head>
<body>
<script>
var current_datetime=new Date(); //fetches current date and time
var set_to=current_datetime.getFullYear()+"-"+(current_datetime.getMonth()+1)+"-"+current_datetime.getDate()+" "+current_datetime.getHours()+":"+current_datetime.getMinutes()+":"+current_datetime.getSeconds();
document.write("The format followed is yyyy-dd-mm hh:mm:ss : "+set_to);
</script>
</body>
</html>