Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Abhijit Das
Abhijit Das
5,022 Points

Please I need help on sorting data as MM-DD-YYYY through JavaScript

Hello Everyone, I am using list.js plugin to sort data alphabetically, numerically and mm-date-year format. I can easily sort alphabet and numeric data by clicking on fa-sort icon; however for mm-dd-yyyy sort, the problem is persisting between different years. I tried this suggestion https://github.com/javve/list.js/issues/221 to fix it, however this doesn't work for me. Below link for the pen. https://codepen.io/Abhijeet_dasdezine/pen/OOyLom?editors=1010 Please help or guide me to fix the problem. List.Js very easy to use, therefore it would be great help if you guide me on this plug In. Otherwise you can suggest me any lightweight simply sorting Jquery plugin, That would be a great help too.

4 Answers

Matt Brock
Matt Brock
28,330 Points

Hey Abhijit, looks like a couple of things were wrong.

The best way to correct the issue is to target the data-timestamp attribute in your JavaScript code initialization, instead of the date-month class name. From the List.js API docs, your options variable should look like this:

var options = {
    valueNames: [
      'number',
      'name',
      { name: 'date-month', attr: 'data-timestamp' }
    ]
};

It still wasn't working when I made this correction, so after a bit I noticed that you had the same timestamp in all of the list item date cells, so even if the JavaScript code was setup properly, it wouldn't know how to sort them!

I forked your Pen here: https://codepen.io/mattpbrock/pen/bYVwgX?editors=1010 so you could see how I got it working. Hope this helps!

Abhijit Das
Abhijit Das
5,022 Points

Matt Brock...thank you for your reply and guide me towards the solution. However; the link you shared here "List.JS API docs", I am unable to open it, it's my browser's problem and that really annoying. Therefore, please guide me here. Few questions I want to ask, 1) what is "timestamp"? and how it's working here to sort the mm-date-yyyy data. 2) What are the significance of "data-timestamp" attribute? how they works? I see in your forked pen every date cell has different data-timestamp attribute as string, how could they generate and help here to solve the problem. Kindly guide me here with your comments or any links to read. I appreciate the effort you put in your answer, and for that I am really grateful.

Matt Brock
Matt Brock
28,330 Points

You're very welcome!

  1. A timestamp is an integer-based way of measuring elapsed time from a certain point. A Unix Timestamp is the number of seconds that have elapsed since January 1, 1970 at any specific moment (the number 1509570375 as I type this).
  2. List.js (and any programming language) can use that number to present a moment in time in any format, such as MM.DD.YYYY, MM/DD/YY, etc. Using the Unix Timestamp for a specific date ensures that November 1, 2017 (Unix Timestamp: 1509494400; Date Format: 11.01.2017) is always sorted as a later date than December 23, 2015 (Unix Timestamp: 1450828800; Date Format: 12.23.2015). Does that make sense? Here is a handy tool to convert any date to its Unix Timestamp.
  3. The List.js API Documentation says you can use an HTML data attribute to sort from. All you have to do is add it to your options array as an object, instead of a string like you have done for number and name.
  4. If you just use the class name you have set on the date cell, date-month, List.js will attempt to sort the data based on the value of the element, which is your date data in the MM.DD.YYYY format. This does not sort accurately, as described in #2 above. So, you have to set the data-timestamp attribute's value to that cell's date's Unix Timestamp, then tell List.js to sort based on that.
Abhijit Das
Abhijit Das
5,022 Points
Abhijit Das
Abhijit Das
5,022 Points

Thank you @Matt Brock; nicely you clear all my queries on Timestamp

Matt Brock
Matt Brock
28,330 Points

You're welcome! You can mark the answer as solved by selecting a "Best Answer". Have a great week!

Abhijit Das
Abhijit Das
5,022 Points
Abhijit Das
Abhijit Das
5,022 Points

Yes Indeed..here is the final output. https://codepen.io/Abhijeet_dasdezine/pen/QOjodB

Matt Brock
Matt Brock
28,330 Points

That looks great! Nicely done :) I like that script; I may have to use List.js in the future.

Abhijit Das
Abhijit Das
5,022 Points
Abhijit Das
Abhijit Das
5,022 Points

Thank you @Matt Brock..However, Firefox doesn't support Timestamp? coz, it's not working in firefox browser..:(