Sort an Object Array by Date in JavaScript

To sort an array of object by date, there is a number of methods but we’re going to see few of the most preferred methods.

Date Object: The Date object in JavaScript is used to represent a moment of time. This time value is since 1 January 1970 UTC (Coordinated Universal Time). We can create date using the Date object by calling the new Date() constructor as shown in the below syntax.
Syntax:

new Date();
new Date(value);
new Date(dateString);
new Date(year, month, day, hours, minutes, seconds, milliseconds);

Parameters:

  • value: This value is the number of milliseconds since January 1, 1970, 00:00:00 UTC.
  • dateString: It represents a date format.
  • year: It represents the integer values which ranges from years 1900 to 1999.
  • month: It is represented by integer values which ranges from 0 for January to 11 for December.
  • day: It is an optional parameter. It is represented by integer value for the day of the month.
  • hours: It is optional parameter. It is represented by an integer value for the hour of the day.
  • minutes: It is optional parameter. It is represented by an integer value for the minute of a time.
  • seconds: It is optional parameter. It is represented by integer value for the second of a time.
  • milliseconds: It is optional parameter. It is represented by integer value for the millisecond of a time.

Example 1: This example sorts the array of objects by date by using Date object.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            JavaScript | Sort Object Array By Date
        </title
    </head>
      
    <body style = "text-align:center;"
          
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1
          
        <button onclick = "geeks_outer()"
            Click To Sort 
        </button
      
        <p id = "GFG_P" style = "color:green;"></p>
          
        <script
            var array = [{id: "1", date: "Mar 11 2012 10:00:00 AM"},
                        {id: "2", date: "Mar 8 2012 08:00:00 AM"}];
              
            var el = document.getElementById("GFG_P");
            function geeks_outer() {
                array.sort(function(a, b){
      
                    return new Date(a.date) - new Date(b.date);
                });
              
                el.innerHTML = JSON.stringify(array);
            }
              
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example is same as previous one but with a little modification in the sort function.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            JavaScript | Sort Object Array By Date. 
        </title
    </head>
      
    <body style = "text-align:center;"
          
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1
          
        <button onclick = "geeks_outer()"
            Click To Sort
        </button
          
        <p id = "GFG_P" style = "color:green;"></p>
          
        <!-- Script to sort array of object by date -->
        <script
            var array = [{id: "1", date: "Mar 12 2012 10:00:00 AM"},
                        {id: "2", date: "Mar 8 2012 08:00:00 AM"}];
              
            var el = document.getElementById("GFG_P");
          
            function geeks_outer() {
                array.sort(GFG_sortFunction);
                el.innerHTML = JSON.stringify(array);
            }
              
            function GFG_sortFunction(a, b) { 
                var dateA = new Date(a.date).getTime();
                var dateB = new Date(b.date).getTime();
                return dateA > dateB ? 1 : -1; 
            }; 
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.