How can I sort dayjs() times?

Question

I have an array of objects like so:

[
 {name: 'John Smith', date: '10:30 AM'}, 
 {name: 'Jo Smith', date: '8:30 AM'}, 
 {name: 'Ela Smith', date: '1:00 PM'}, 
 {name: 'Dave Smith', date: '12:30 PM'},
 {name: 'Elton Smith', date: '10:30 PM'}
]

I'd like to sort these from earliest to latest using dayjs() which is what we're using for the rest of our project so I have to stick with it.

At the moment I'm trying to use this function like so:

dayjs.extend(isSameOrBefore);
dayjs.extend(customParseFormat);

const sortTime = (users) => {
  return shifts.sort((a, b) =>
    dayjs(a.date, 'h:mm A').isSameOrBefore(dayjs(b.date, 'h:mm A')) ? 1 : -1
  );
};

I'd like the array to be sorted like so:

[
 {name: 'Jo Smith', date: '8:30 AM'},
 {name: 'John Smith', date: '10:30 AM'}, 
 {name: 'Elton Smith', date: '10:30 AM'},
 {name: 'Dave Smith', date: '12:30 PM'}, 
 {name: 'Ela Smith', date: '1:00 PM'}
]

However, for some strange reason, it's sorting like so:

[
 {name: 'Jo Smith', date: '8:30 AM'},
 {name: 'Ela Smith', date: '1:00 PM'},
 {name: 'John Smith', date: '10:30 AM'}, 
 {name: 'Dave Smith', date: '12:30 PM'},
 {name: 'Elton Smith', date: '10:30 AM'}, 
]

Any ideas as to why and how I can fix this?

Answer 1

You can achieve the result using passing comparator function to sort method as

const arr = [
  { name: "John Smith", date: "10:30 AM" },
  { name: "Jo Smith", date: "8:30 AM" },
  { name: "Ela Smith", date: "1:00 PM" },
  { name: "Dave Smith", date: "12:30 PM" },
  { name: "Elton Smith", date: "10:30 PM" },
];

const convertTime12to24 = (time12h) => {
  let [hours, minutes, modifier] = time12h.split(/\W+/);

  if (hours === "12") hours = "00";
  if (modifier === "PM") hours = parseInt(hours, 10) + 12;

  return [hours, minutes];
};

const result = arr.sort((a, b) => {
  const [h1, m1] = convertTime12to24(a.date);
  const [h2, m2] = convertTime12to24(b.date);

  return h1 - h2 || m1 - m2;
});

console.log(result);

/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }