JavaScript Sort by Date on table not working

Question

Hi I cannot get sort function working on date. It changes order of the rows but it doesn't sort properly and dates are all over the place.

I would like upcoming events to future events.

See my code below.

$('tr.Entries').sort(function(a,b){
  return new Date(jQuery(a).find('td.event-date > a').text()).getTime() < 
    new Date(jQuery(b).find('td.event-date > a').text()).getTime() 
}).appendTo('tbody');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="event clearfix">
  <thead>
    <tr>
      <td>Date</td>
      <td>Event</td>
      <td>Location</td>
      <td>Ticket</td>
    </tr>
    <tr class="space"></tr>
  </thead>
  <tbody>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">25/08/2017</a>
      </td>
      <td class="event-title">
        <a href="#">Live N Local Winter Music Festival</a> 
      </td>
      <td class="event-location">
        <a href="#">Pause Bar, Balaclava</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a> 
      </td>
    </tr>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">15/04/2017</a>
      </td>
      <td class="event-title">
        <a href="#">Reggae, Seggae &amp; Sega Night</a>
      </td>
      <td class="event-location">
        <a href="#">Bar Open, Fitzroy Melbourne</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a>
      </td>
    </tr>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">06/05/2016</a>
      </td>
      <td class="event-title">
        <a href="#">The Sunraysia Multicultural Festival</a>
      </td>
      <td class="event-location">
        <a href="#">Nowingi Place, Mildura Victoria</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a>
      </td>
    </tr>
  </tbody>
</table>

Thanks!

UPDATE

I have seemed to add dates into an array then sorted them - now I just too append them back to the body? Thanks

var dates = jQuery('tr.Entries').find('td.event-date > a').map(function() {
             return jQuery(this).text();
          }).get();
dates.sort(function(a,b){
var dateA = a;
dateA = dateA.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
var dateB = b;
dateB = dateB.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');

return new Date(dateA).getTime() - new Date(dateB).getTime();
});
jQuery.each(dates, function (index, value) {
     //how to append back to tbody?
     console.log(value);
});

That's because 25/08/2017 is not a valid date to be parsed with new Date. MDN: Date, so your new Date will all be an invalid Date. Is your date always formatted that way, or does it depend on the region of the user? — t.niese
– t.niese, Commented Oct 2, 2017 at 5:26

Hassan Imam · Accepted Answer · 2017-10-08 06:17:03Z

1

Your date string is not in valid format. You can use string#replace() to change the date string to MM-DD-YYYY from DD\MM\YYYY and then covert to date and do the comparison.

$('tr.Entries').sort(function(a,b){
  
 var dateA = jQuery(a).find('td.event-date > a').text();
 dateA = dateA.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
 var dateB = jQuery(b).find('td.event-date > a').text();
 dateB = dateB.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');

 return new Date(dateB).getTime() - new Date(dateA).getTime();;

}).appendTo('tbody');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="event clearfix">
  <thead>
    <tr>
      <td>Date</td>
      <td>Event</td>
      <td>Location</td>
      <td>Ticket</td>
    </tr>
    <tr class="space"></tr>
  </thead>
  <tbody>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">15/04/2017</a>
      </td>
      <td class="event-title">
        <a href="#">Reggae, Seggae &amp; Sega Night</a>
      </td>
      <td class="event-location">
        <a href="#">Bar Open, Fitzroy Melbourne</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a>
      </td>
    </tr>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">06/05/2016</a>
      </td>
      <td class="event-title">
        <a href="#">The Sunraysia Multicultural Festival</a>
      </td>
      <td class="event-location">
        <a href="#">Nowingi Place, Mildura Victoria</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a>
      </td>
    </tr>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">25/08/2017</a>
      </td>
      <td class="event-title">
        <a href="#">Live N Local Winter Music Festival</a> 
      </td>
      <td class="event-location">
        <a href="#">Pause Bar, Balaclava</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a> 
      </td>
    </tr>
  </tbody>
</table>

var dates = ['25/08/2017', '09/09/2017', '15/09/2017', '16/09/2017', '28/09/2017', '10/12/2017', '10/02/2018', '16/12/2017'];

dates.sort(function(a,b){
 var dateA = a;
 dateA = dateA.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
 var dateB = b;
 dateB = dateB.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');

 return new Date(dateA).getTime() - new Date(dateB).getTime();
});
           
console.log(dates);

edited Oct 8, 2017 at 6:17

answered Oct 2, 2017 at 5:43

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

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

6 Comments

roshambo Over a year ago

Hi your code works great for the first few entries, but I am not sure if it accounts for the year then when it hits 2018 it then goes back to 2017 - see screenshot imgur.com/a/sWABS

Hassan Imam Over a year ago

Hi I have updated the solution. I have also added a new code snippet based the image. Thanks for pointing out.

roshambo Over a year ago

Thanks, ill give it a go, but will have to autopopulate array from the dates column how is best to do this? each() statement?

Hassan Imam Over a year ago

Yeah, each could be one of the option. BTW, how are you getting the data?

roshambo Over a year ago

This is a wordpress website

|

aug · Accepted Answer · 2017-10-02 05:26:01Z

1

new Date() doesn't know how to parse dates that have the day in the first section as opposed to the section. Date requires the format MM/DD/YYYY

If you take your first date 25/08/2017 and pass it into new Date() you will get an Invalid Date response.

If you want this to work you'll need to make sure the date is formatted into something Date understands so you can either do a swap programmatically or you can also pass in the parameters manually into the new Date function

answered Oct 2, 2017 at 5:26

aug

11.8k10 gold badges76 silver badges96 bronze badges

Collectives™ on Stack Overflow

JavaScript Sort by Date on table not working

Thanks!

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Thanks!

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related