How to Compare Two Dates In JavaScript

Introduction

 
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 the following problems:
  1. Compare two dates with time.
  2. Compare today date with any other date.
  3. Compare past and future dates with a given date.

Create a Date Object

 
The following describes the 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.