Sort multiple range of time

Question

I am currently working on a booking application project. I want to sort the itineraries created based on their time range, does anyone know how to sort multiple ranges of time in javascript/jquery?

For example, I have the ff. range of time (Each range should be considered as one object, I think?);

1:01 pm - 5:00 pm,
7:00 am - 8:00 am,
10:01 am - 1:00 pm,
8:01 am - 10:00 am,

I am planning to have a button to sort it from earliest to latest.

Something like this;

7:00 am - 8:00 am,
8:01 am - 10:00 am,
10:01 am - 1:00 pm,
1:01 pm - 5:00 pm

I haven't tried anything yet because I really don't know where to start. I am hoping to get the idea on how it works. Thank you in advance.

I did some research about this and I only found these How to sort an array of objects with jquery or javascript, What is the best way to parse a time into a Date object from user input in Javascript?. I am getting the idea on how to sort time because of this, but I don't know how to apply this on range of time.

As I have said, I really don't know where to start so I haven't considered whether it is an array or object, yet. It may be either one of them, I just need to know the idea on how it works. Thanks!

What sort of form is your input? An array, a multiline string, or what? — CertainPerformance, Nov 16 '18 at 08:51
@mark-baijens Yes I can do that in a single time, but i need it in range of time. — Royts, Nov 16 '18 at 09:09
@Royts then calucalte the range from the dateobject and sort that? Please post some code of your current situation at least. — Mark Baijens, Nov 16 '18 at 09:15
@MarkBaijens I'll try that. Sorry, I haven't tried anything yet, I am getting the idea first. Thanks! — Royts, Nov 16 '18 at 09:18

score 1 · Accepted Answer · answered Nov 16 '18 at 09:27

One solution using Moment.js looks like this.

var timeArr = ["1:01 pm - 5:00 pm", "7:00 am - 8:00 am", "10:01 am - 1:00 pm", "8:01 am - 10:00 am"];

var sortedTime = [];
var tempTimesArr = [];

// Changing start time of the range into timestamp for comparison later and storing index of original time range to use original time range for later
timeArr.forEach(function(singleTime, index){
 var tempSingleTimeArr = singleTime.split("-");
  tempTimesArr.push({ time: moment(tempSingleTimeArr[0].trim(), "hh:mm a").unix(), index: index });
});

// sorts on the basis of start time of the range
tempTimesArr.sort(function(a, b){ return a.time - b.time; });

// Assign original time range to the new array
tempTimesArr.forEach(function(t){
 sortedTime.push(timeArr[t.index])
});
console.log(sortedTime);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can check the sorted list on the console of this fiddle https://jsfiddle.net/nirmalrizal/3z90gpre/27/

yeah, i am using moment.js. I'll try this. Thanks! – Royts Nov 16 '18 at 09:49 — Royts, Nov 16 '18 at 09:49

score 1 · Answer 2 · answered Nov 16 '18 at 09:27

You can write your own sort function and sort the array based on a calculation between the start time and endtime to sort it based on the time range.

var ranges = [{
  starttime: new Date(0,0,0,9,30,0),
  endtime: new Date(0,0,0,17,30,0),
},{
  starttime: new Date(0,0,0,7,30,0),
  endtime: new Date(0,0,0,8,30,0),
},{
  starttime: new Date(0,0,0,11,30,0),
  endtime: new Date(0,0,0,15,30,0),
}];

function compare(a,b) {
  if (a.endtime - a.starttime < b.endtime - b.starttime)
    return -1;
  if (a.endtime - a.starttime > b.endtime - b.starttime)
    return 1;
  return 0;
}

ranges.sort(compare);

console.log(ranges)

Thanks for this. I'll try it now. – Royts Nov 16 '18 at 09:49 — Royts, Nov 16 '18 at 09:49

score 0 · Answer 3 · answered Nov 19 '18 at 07:47

I modified @MarkBaijens answer because it only sort the startTime. It doesn't sort correctly if there are same multiple starttime with different endtime.

var timeArr = ["1:01 pm - 5:00 pm", "7:00 am - 8:00 am", "10:01 am - 1:00 pm", "7:00 am - 8:30 am", "8:01 am - 10:00 am", "7:00 am - 7:50 am"];

var sortedTime = [];
var tempTimesArr = [];

// Changing start time of the range into timestamp for comparison later and storing index of original time range to use original time range for later
timeArr.forEach(function(singleTime, index){
 var tempSingleTimeArr = singleTime.split("-");
  tempTimesArr.push({ startTime: moment(tempSingleTimeArr[0].trim(), "hh:mm a").unix(), endTime: moment(tempSingleTimeArr[1].trim(), "hh:mm a").unix(), index: index });
});

// sorts on the basis of start time of the range
tempTimesArr.sort(function(a, b){ return ((a.startTime - b.startTime) === 0) ? (a.endTime - b.endTime) : (a.startTime - b.startTime);});

// Assign original time range to the new array
tempTimesArr.forEach(function(t){
 sortedTime.push(timeArr[t.index])
});
console.log(sortedTime);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This is the link on codepen

Sort multiple range of time

3 Answers3