CODEWITHSUNDEEP
javascriptjquery
Pepe
Pepe

Reputation: 1002

Whats wrong with my date sort?

I try to modify my sort function so it sorts dates correctly, but the script does nothing.

My HTML

<div class="sort_date">Sort Date</div>
  <div class="list">
    <div class="dateDiv">04/05/2012, 10:25</div>
    <div class="dateDiv">11/05/2012, 19:41</div>
    <div class="dateDiv">09/05/2012, 07:00</div>
    <div class="dateDiv">09/05/2012, 16:45</div>
  </div>
</div>

My Javascript code:

function parseDate(input) {
  var parts = input.match(/(\d+)/g);
  return new Date(parts[0], parts[1]-1, parts[2], parts[3], parts[4]);
}

var NewDate = $.makeArray($(".dateDiv"));
NewDate.sort(function(a, b) {
    console.log( parseDate( $(a).text() ) );
    return parseDate( $(a).text() ) < parseDate( $(b).text() );
});

var OldDate = $.makeArray($(".dateDiv"));
OldDate.sort(function(a, b) {
    console.log( parseDate( $(a).text() ) );
    return parseDate( $(a).text() ) > parseDate( $(b).text() );
});

$(function(){
    var sortHighCheck = null;
    $('.sort_date').click(function(){
        if (sortHighCheck === 1) {
            $(".dateDiv").sort(NewDate).appendTo('.list')
            sortHighCheck = 0;
        } else {
            $(".dateDiv").sort(OldDate).appendTo('.list')
            sortHighCheck = 1;
        }
});
});

Here is a js fiddle.

Where is my mistake? Can anybody help?

Upvotes: 0

Views: 74

Answers (1)

showdev
showdev

Reputation: 29168

Your script defines two arrays of divs, one sorted in each direction. So it seems that, upon the click event, you just need to replace the HTML of the .list with the appropriately sorted content.

function parseDate(input) {
  var parts = input.match(/(\d+)/g);
  return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4]);
}

$(function() {

  var NewDate = $.makeArray($(".dateDiv"));
  NewDate.sort(function(a, b) {
    return parseDate($(a).text()) < parseDate($(b).text());
  });

  var OldDate = $.makeArray($(".dateDiv"));
  OldDate.sort(function(a, b) {
    return parseDate($(a).text()) > parseDate($(b).text());
  });

  var sortHighCheck = null;
  $('.sort_date').click(function() {
    if (sortHighCheck == 1) {
      $('.list').html(NewDate);
      sortHighCheck = 0;
    } else {
      $('.list').html(OldDate);
      sortHighCheck = 1;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sort_date">Sort Date</div>
<div class="list">
  <div class="dateDiv">2012/04/05, 10:25</div>
  <div class="dateDiv">2012/11/05, 19:41</div>
  <div class="dateDiv">2012/09/05, 07:00</div>
  <div class="dateDiv">2012/09/05, 16:45</div>
</div>

Also, note that I've moved the year to the beginning of each string. In order to create accurate date objects, your parsing function requires date strings in a particular format, with the year listed first:

new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);

See Date @ MDN

For example:

04/05/2012 => Tue Nov 02 1909
2012/04/05 => Thu Apr 05 2012

Edit

It's true that the list seems to sort correctly even with months listed first. But this is just an illusion. The parse function treats the month values as years, which puts the strings in an order that looks correct. But when the years of the dates differ, you can see that they are not actually sorted chronologically. The months are in order, but the years are not.

function parseDate(input) {
  var parts = input.match(/(\d+)/g);
  return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4]);
}


$(function() {

  var dates = $.makeArray($(".dateDiv")),
      sortHighCheck = null;
  
  $('.sort_date').click(function() {
    
    if (sortHighCheck == 1) {
      dates.sort(function(a, b) {
        return parseDate($(a).text()) < parseDate($(b).text());
      });
      sortHighCheck = 0;
    } else {
      dates.sort(function(a, b) {
        return parseDate($(a).text()) > parseDate($(b).text());
      });
      sortHighCheck = 1;
    }
    
    $('.list').html(dates);
    
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sort_date">Sort Date</div>
<div class="list">
  <div class="dateDiv">04/05/2012, 10:25</div>
  <div class="dateDiv">11/05/2013, 19:41</div>
  <div class="dateDiv">09/05/2014, 07:00</div>
  <div class="dateDiv">09/05/2015, 16:45</div>
</div>

Upvotes: 1

Related Questions