In Focus

How to Compare Two Dates In JavaScript

In this article, you will learn how to compare two dates in JavaScript. The code also compares two date and times in JavaScript.

I have encountered many confused developers attempting to compare two dates using JavaScript. There are many methods or algorithms for comparing dates but I am showing the simplest ways to compare dates as well as times using JavaScript.
 
This article will help you to resolve following problems:
  1. Compare two dates with time.
  2. Compare today date with any another date.
  3. Compare past and future dates with given date.

Create a Date Object

 
The following describes creation of Date objects:
  1. First we need to create a date object.
  2. The Date object is used to work with dates and times.
  3. Date objects are created with the Date() constructor.
  4. There are four ways of instantiating a date object:

    • new Date() //This will return current date and time.
    • new Date(milliseconds)
    • new Date(dateString)
    • new Date(year, month, day, hours, minutes, seconds, milliseconds)

  5. Here are a few examples of instantiating a date:
     
    • var today = new Date() //Current date
    •  var anotherDate = new Date("March 01, 2000 20:50:10")
    • var anotherDate = new Date(2000,03,01) 
    • var anotherDate = new Date(2000,03,01,20,50,10)
     
  6. Note: Here the month parameter will start from 0 to 11.

Comparing dates in JavaScript

 
The following describes how to compare two dates:
  1. I have two dates. Date one is 15-01-2010 and another date is 15-01-2011.
  2. I compare these two dates using the following JavaScript code
    1. <script type="text/javascript"language="javascript">  
    2.    function CompareDate() {  
    3.        //Note: 00 is month i.e. January  
    4.        var dateOne = new Date(2010, 00, 15); //Year, Month, Date  
    5.        var dateTwo = new Date(2011, 00, 15); //Year, Month, Date  
    6.        if (dateOne > dateTwo) {  
    7.             alert("Date One is greater than Date Two.");  
    8.         }else {  
    9.             alert("Date Two is greater than Date One.");  
    10.         }  
    11.     }  
    12.     CompareDate();  
    13. </script>
Output
 
 
 
Comparing dates with time
 
The following describes how to compare dates with times:
  1. Here I will compare two dates with their times.
  2. I have two dates
    - Date One: 20-05-2012 14:55:59
    - Date Two: 20-05-2012 12:10:20
  3. The following JavaScript code will compare these dates with their times:
    1. <script type="text/javascript"language="javascript">  
    2.    function CompareDate() {  
    3.        //            new Date(Year, Month, Date, Hr, Min, Sec);  
    4.        var dateOne = new Date(2012, 04, 20, 14, 55, 59);  
    5.        var dateTwo = new Date(2012, 04, 20, 12, 10, 20);  
    6.         //Note: 04 is month i.e. May  
    7.        if (dateOne > dateTwo) {  
    8.             alert("Date One is greater than Date Two.");  
    9.         }else {  
    10.             alert("Date Two is greater than Date One.");  
    11.         }  
    12.     }  
    13.     CompareDate();  
    14. </script>  
Output
 
 
Comparing today's date with another date
 
The following describes how to compare today's date with another date:
  1. The following code will compare today's date with the given date.
  2. The given date is 25-12-2010. This date will be compared with today's date using the following code:
    1. <script type="text/javascript"language="javascript">  
    2.    function CompareDate() {  
    3.        var todayDate = new Date(); //Today Date  
    4.        var dateOne = new Date(2010, 11, 25);  
    5.        if (todayDate > dateOne) {  
    6.             alert("Today Date is greater than Date One.");  
    7.         }else {  
    8.             alert("Today Date is greater than Date One.");  
    9.         }  
    10.     }  
    11.     CompareDate();  
    12. </script>
Output
 
 
Some useful methods of Date Object:
  • getDate: Returns the day of the month (1-31) for the specified date according to local time.
  • getDay: Returns the day of the week (0-6) for the specified date according to local time.
  • getFullYear: Returns the year (4 digits for 4-digit years) of the specified date according to local time.
  • getHours: Returns the hour (0-23) in the specified date according to local time.
  • getMilliseconds: Returns the milliseconds (0-999) in the specified date according to local time.
  • getMinutes: Returns the minutes (0-59) in the specified date according to local time.
  • getMonth: Returns the month (0-11) in the specified date according to local time.
  • getSeconds: Returns the seconds (0-59) in the specified date according to local time.
  • getTime: Returns the numeric value of the specified date as the number of milliseconds since January 1, 1970, 00:00:00 UTC (negative for prior times).
  • getTimezoneOffset: Returns the time-zone offset in minutes for the current locale.
  • getUTCDate: Returns the day (date) of the month (1-31) in the specified date according to universal time.
  • getUTCDay: Returns the day of the week (0-6) in the specified date according to universal time.
  • getUTCFullYear: Returns the year (4 digits for 4-digit years) in the specified date according to universal time.
  • getUTCHours: Returns the hours (0-23) in the specified date according to universal time.
  • getUTCMilliseconds: Returns the milliseconds (0-999) in the specified date according to universal time.
  • getUTCMinutes: Returns the minutes (0-59) in the specified date according to universal time.
  • getUTCMonth: Returns the month (0-11) in the specified date according to universal time.
  • getUTCSeconds: Returns the seconds (0-59) in the specified date according to universal time.
  • getYear: Returns the year (usually 2-3 digits) in the specified date according to local time. Use getFullYear instead.
  • setDate: Sets the day of the month (1-31) for a specified date according to local time.
  • setFullYear: Sets the full year (4 digits for 4-digit years) for a specified date according to local time.
  • setHours: Sets the hours (0-23) for a specified date according to local time.
  • setMilliseconds: Sets the milliseconds (0-999) for a specified date according to local time.
  • setMinutes: Sets the minutes (0-59) for a specified date according to local time.
  • setMonth: Sets the month (0-11) for a specified date according to local time.
  • setSeconds: Sets the seconds (0-59) for a specified date according to local time.
  • setTime: Sets the Date object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC, allowing for negative numbers for times prior.
  • setUTCDate: Sets the day of the month (1-31) for a specified date according to universal time.
  • setUTCFullYear: Sets the full year (4 digits for 4-digit years) for a specified date according to universal time.
  • setUTCHours: Sets the hour (0-23) for a specified date according to universal time.
  • setUTCMilliseconds: Sets the milliseconds (0-999) for a specified date according to universal time.
  • setUTCMinutes: Sets the minutes (0-59) for a specified date according to universal time.
  • setUTCMonth: Sets the month (0-11) for a specified date according to universal time.
  • setUTCSeconds: Sets the seconds (0-59) for a specified date according to universal time.
  • setYear: Sets the year (usually 2-3 digits) for a specified date according to local time. Use setFullYear instead.
  • toDateString: Returns the "date" portion of the Date as a human-readable string.
I hope you will enjoy this article. Please provide your valuable suggestions.