All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Sort Date Ascending And Descending

Last Updated : Mar 11, 2024

JavaScript Sort Date Ascending And Descending

In this tutorial we will show you the solution of JavaScript sort date ascending and descending, here we defined two array variables with same array values and sorting done by using sort() method in javascript.

The sort() method sorts the elements of an array in place and returns the reference to the same array, now sorted. We handled sorting array dates with two parameters by subtracting them with date constructor for gets either ascending or descending order.

Step By Step Guide On JavaScript Sort Date Ascending And Descending :-

Here we defined temporary array variables ‘t1,t2’ for stores results of sorted array and defined two array ‘arr1,arr2’ variables with same collection of three date strings.

Then for sorting we needs to append them with sort() method and sorted results stored on respective t1,t2 variables.

In first sorting ‘t1’ had descending order result which is by those two parameter subtraction operation, here we subtracted second parameter with first parameter. It’s reverse process we gets ascending order result.

<!DOCTYPE html>
<html>
    <head>
        <title>DATE SORT</title>
    </head>
    <body>
        <script>
            var t1,t2=[];
            var arr1 = [ "01-Sep-2019 12:50:20 pm","04-Jan-2022 12:22:50 pm","10-Oct-2009 12:12:03 pm" ];
            var arr2 = [ "01-Sep-2019 12:50:20 pm","04-Jan-2022 12:22:50 pm","10-Oct-2009 12:12:03 pm" ];
            t1=arr1.sort((a,b)=> new Date(b).getTime() - new Date(a).getTime())
            t2=arr2.sort((a,b)=> new Date(a).getTime() - new Date(b).getTime())
            console.log(t1);
            console.log(t2);
        </script>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. In script we defined empty temporary array variables ‘t1,t2’ and array variables ‘arr1,arr2’ defined with same ‘[ "01-Sep-2019 12:50:20 pm","04-Jan-2022 12:22:50 pm","10-Oct-2009 12:12:03 pm" ]’ values.
  7. If we using same array ‘arr1’ for two types of sorting which leads to overwriting, because sort method will returns by changing from it reference so we gets recent sort order only that’s way two times we defined array with same values.
  8. In first sorting we appending ‘arr1’ with sort() method, there we have to use two sample parameters for subtraction. In this subtraction we need to use date constructor and getTime() method for gets correct and same type date strings.
  9. Here we subtracting second parameter by first parameter so we getting descending order of sorted dates as result and stored on variable ‘t1‘.
  10. At second sorting we done same process except subtracting second parameter by first parameter instead we done reversely then we gets ascending result and stored on variable ‘t2’.Finally we printed both sorted arrays on console by using console.log() method.
  11. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to do sorts of ascending and descending order dates using javascript.

When we executes program on browser we can’t see the result because we printed on console panel so we have to use shortcut ‘ctrl+shift+j’ then console panel will open at right hand side with results of descending order ‘['04-Jan-2022 12:22:50 pm', '01-Sep-2019 12:50:20 pm', '10-Oct-2009 12:12:03 pm']’ and ascending order ‘['10-Oct-2009 12:12:03 pm', '01-Sep-2019 12:50:20 pm', '04-Jan-2022 12:22:50 pm']’.

If your wish to modify date values in array then you can modify accordingly.

I hope this tutorial on JavaScript sort date ascending and descending helps you and the steps and method mentioned above are easy to follow and implement.