Custom Sorting By 24-hour clock Time in Backbone/Javascript

Question

I have backbone collection which consists of dates and 24-hour clock times. I would like to be able to sort my collection by time.

So since a normal sort functionality would sort (as an example) 1:00, 17:00, and 19:00 as such, I am trying to display 17:00, 19:00, 1:00 in that order. 1:00 of the next day proceeds 19:00 in time, in this case.

Since this case only occurs when a value is less than or equal to 12, the simplest solution seems to be: sort those values greater than 12; sort values less than 12; append sorted values less than 12 to values greater than 12. So two separate sorted lists.

    comparator: function( a, b ) {
                if(!this.sortColumn ) return 0;
                    if(sortColumn == 'time') {
    switch (a.get('time')) {
                case a > 12: return 1;
                case a <= 12: return 2;
            }
      }
}

This is a rough idea that I've had. This doesn't sort the two respective groups. The idea being that the case where it's greater than 12 precedes the case where it's less than 12, but they will be unsorted.

EDIT: Note that all the events occur after 12:00 PM on Day 1 and before 12:00 PM of the next day, Day 2. This is why dates like 1:00 will be after dates like 19:00.

Any advice would be fantastic.

Thanks

It's not clear what you're asking. What order do you want from your times? (And why would you want anything other than the obvious ordering from 0 to 23?) — Pointy
– Pointy, Commented Nov 16, 2015 at 15:44
Are they javascript dates? If so, getDate() will return you an integer where 01.00 the next day will be larger than 19.00 the previous day. — Shilly
– Shilly, Commented Nov 16, 2015 at 15:57
OK so instead of just comparing "a" to "b", first add 24 to either value if it's less than 12. — Pointy
– Pointy, Commented Nov 16, 2015 at 15:58
That would work, it's just that how would I display this and still maintain the sorted order but not have numbers like 25:00 or 26:00 displayed to my screen? — nietsnegttiw
– nietsnegttiw, Commented Nov 16, 2015 at 16:02

nikoshr · Accepted Answer · 2015-11-16 16:47:07Z

2

You can define your comparator function as a "sortBy" :

"sortBy" comparator functions take a model and return a numeric or string value by which the model should be ordered relative to others.

The goal is then to produce a sorting value that corresponds to your requirements. As @Pointy noted in the comments, adding 24 to the times before 12:00 would do the trick

For example

var C = Backbone.Collection.extend({

    comparator: function (m) {
        var t = m.get('time'),
            h = parseInt(t.substr(0, 2), 10),
            m = parseInt(t.substr(3), 10);
        if (h<12) h = h+24;

        return h *60 + m;
    }

});

var c = new C([
    {time: '01:17'},
    {time: '01:00'},
    {time: '12:00'},
    {time: '07:00'},
    {time: '15:00'}
]);

console.log(c.pluck('time'));

http://jsfiddle.net/nikoshr/5srqn5b4/

answered Nov 16, 2015 at 16:47

nikoshr

33.4k34 gold badges95 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Javier Buzzi · Accepted Answer · 2015-11-16 16:58:03Z

1

I dont see the issue with just ordering them by the actual number..

var times = [];
// generate some data..
// [1:00, 1:30, 2:00 ...]
for(var i=0; i < 24; i++){times.push(i.toString() + ':00');
times.push(i.toString() + ':30')}
// standard sorting
console.log(_.sortBy(times, function(num){ return num}))
> ["0:00", "0:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "1:00", "1:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30", "2:00", "2:30", "3:00", "3:30", "4:00", "4:30", "5:00", "5:30", "6:00", "6:30", "7:00", "7:30", "8:00", "8:30", "9:00", "9:30"]
// improved sorting
console.log(_.sortBy(times, function(num){ var key = parseInt(num.split(':')[0]); if (key >= 12) {return key - 12} return key + 20 }))
> ["12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30", "0:00", "0:30", "1:00", "1:30", "2:00", "2:30", "3:00", "3:30", "4:00", "4:30", "5:00", "5:30", "6:00", "6:30", "7:00", "7:30", "8:00", "8:30", "9:00", "9:30", "10:00", "10:30", "11:00", "11:30"]

edited Nov 16, 2015 at 16:58

answered Nov 16, 2015 at 16:24

Javier Buzzi

6,9931 gold badge44 silver badges56 bronze badges

4 Comments

nietsnegttiw Over a year ago

In the edit, you'll see that 1:00 must proceed 19:00 (for example), because the range of times is between 12:00 PM of one day and 12:00 PM of the next day. Regular sorting will not work in this case.

Javier Buzzi Over a year ago

@nietsnegttiw i am lost as to your grouping and explanation. "1:00 of the next day proceeds 19:00 in time"... what? Can you show me an example of how you want the sorting done if you had the times between 1-23.

nietsnegttiw Over a year ago

{12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11}. This is the ordering. This is how every hour would be sorted from earliest to latest.

Javier Buzzi Over a year ago

@nietsnegttiw like that?

Collectives™ on Stack Overflow

Custom Sorting By 24-hour clock Time in Backbone/Javascript

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related