CODEWITHSUNDEEP
javascriptjquerysorting
roshambo
roshambo

Reputation: 2794

JavaScript Sort by Date on table not working

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);
});

Upvotes: 2

Views: 2609

Answers (2)

Hassan Imam
Hassan Imam

Reputation: 22524

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);

Upvotes: 1

aug
aug

Reputation: 11714

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

Upvotes: 1

Related Questions