How to Compare Two Dates Using 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

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:

<scripttype="text/javascript"language="javascript">

 

   function CompareDate() {

       //Note: 00 is month i.e. January

       var dateOne = new Date(2010, 00, 15); //Year, Month, Date

       var dateTwo = new Date(2011, 00, 15); //Year, Month, Date

       if (dateOne > dateTwo) {

            alert("Date One is greather then Date Two.");

        }else {

            alert("Date Two is greather then Date One.");

        }

    }

 

    CompareDate();

</script>

Output

DateTime1.jpg

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:

<scripttype="text/javascript"language="javascript">

 

   function CompareDate() {

       //            new Date(Year, Month, Date, Hr, Min, Sec);

       var dateOne = new Date(2012, 04, 20, 14, 55, 59);

       var dateTwo = new Date(2012, 04, 20, 12, 10, 20);

        //Note: 04 is month i.e. May

       if (dateOne > dateTwo) {

            alert("Date One is greather then Date Two.");

        }else {

            alert("Date Two is greather then Date One.");

        }

    }

 

    CompareDate();

</script>

Output

DateTime2.jpg

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:

<scripttype="text/javascript"language="javascript">

 

   function CompareDate() {

       var todayDate = new Date(); //Today Date

       var dateOne = new Date(2010, 11, 25);

       if (todayDate > dateOne) {

            alert("Today Date is greather then Date One.");

        }else {

            alert("Today Date is greather then Date One.");

        }

    }

 

    CompareDate();

</script>

Output

DateTime3.jpg

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.
 

Next Recommended Readings