Sorting UTC dates in javascript

Question

EDIT 4/16/2012: I solved the issue of getting the timezone abbreviated into a letter format, had to download a third party sorting method and add a few things to get the desired results. The only problem now is Daylight Savings Time handlers, but there are a bunch of subjects on that. However if anyone knows how to handle UTC Daylight Savings hanlers, please feel free to help.

Thank you everyone. /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// I've made an html table that I've binded with a javscript viewmodel using knockoutjs that pulls the info from a private server usin JSON function. I'm trying to make each column sortable (click on the column header once to get everything in descending order according to that column's info; click header again to get everything in ascending, and a third time to get everything in it's original order).

PLEASE NOTE: I have searched for my problem and have seen other solutions, but nothing so far has worked for me. I'm hoping to find a solution specific towards my code.

The Javascript ViewModel.js file is basically like this:

Event(column1, column2, ...., columnN){
    var self = this;
    self.column1 = column1;
    self.column2 = column2;
    .
    .
}

//Sort column2 that has the Dates (dd (day) HHMM (hours/minutes) mmm (month) yy (year) format)

self.sortColumn = "Column2"
self.sortAscending = true;

self.SortByDates = function(){
    if(self.sortColumn == "Column2")
        self.sortAscending = !self.sortAscending;
    else{
        self.sortColumn = "Column2"
        self.sortAscending = true;
    }
    self.rows.sort(function(a,b){
        if(self.sortAscending == true)
            for(self.Column2 in self.rows)
                return a.Column2 > b.Column2 ? 1 : a.Column2 < b.Column2 ? -1 : 0;
            else
                return a.Column2 < b.Column2 ? 1 : a.Column2 > b.Column2 ? -1 : 0;
    });
}

//specify location of server and info and get them
function getEvents(){
    $.getJSON("http://.........",
        function (data){
            $.each(data.d, function(i, item){
                handleEvent(item)
            })
        }
    );
}
//pushes (AKA populates) info from server into the table
function handleEvent(item){
    var newEvent = new Event(item.Column1InfoFromServer,
                                formatJSONDate(item.Column2DateInfoFromServer), .....)
    this.Model.rows.push(newEvent);
}
//Formats the date info from server into dd (day) HHMM (hours/minutes) mmm (month) yy (year)
formatJSONDate(jsonDate){
    var date = new Date(parseInt(jsonDate.substr(6)));
    return date.format("dd HHMM mmm yy");
}

this.Model = new ViewModel();
this.getEvents();
ko.applyBindings(this.Model);

I'm having one hell of a hard time getting the Date in its converted form (yes it HAS to be in that form --> actually, I still need to figure out how to include the time-zone abbreviation right after the 'HHMM' part based off of UTC). So lets say I have "11 1136 Apr 12" and "22 1624 Jan 12" among other dates in the table. Right now when I try sorting the table according to the dates, they don't sort appropriately. Any help is appreciated, thank you.

EDIT: To be clear, I'm trying to display the timezones in military timezone codes (timezones 'A'-'Z'). Also, the dates being taken from the server are already in UTC.

Answer 1

UPDATE:

I was looking at another question, and someone created a knockout grid addon: https://github.com/ericmbarnard/KoGrid

I bet this might help you out :-)

---OLD ANSWER for nostalgia----

There are some great helper functions in the Underscore library, one of them being sort:

http://documentcloud.github.com/underscore/#sortBy

sortBy_.sortBy(list, iterator, [context]) Returns a sorted copy of list, ranked in ascending order by the results of running each value through iterator. Iterator may also be the string name of the property to sort by (eg. length).

_.sortBy([1, 2, 3, 4, 5, 6], function(num){ return Math.sin(num); });
=> [5, 4, 6, 3, 1, 2]

I'd give this a shot, along with creating a better model for your dates. It sounds like you need to store a property which is a unique point in time, along with a text value for the user.

Answer 2

Well, to get numeric values for your date objects, sort by pDate.valueOf(). This will give you the # of millisecond since epoch.

However, there is an issue inside of your sort function, but I'm not sure what it is supposed to do. You can't walk an object inside of a sort function and return values like that.