compare two dates with javascript extracted from HTML5 data

Question

I have a array which needs to be sorted before displaying. There is a code how I crate my array

    for ( $i = 0, $count = count( $notifications ); $i < $count; ++$i ) {
        $alt = ( 0 == $counter % 2 ) ? ' class="alt"' : ''; ?>
        <script>
        array[i] = '<li><?php echo addslashes($notifications[$i]);?></li>';
        i++;
        </script>
        <?php $counter++;
    }

?>

here is how each cycle looks like:

<li><a data-date="2013-06-16 11:44:50" href="http://example.com/url/">text!</a></li>

now I need sort this array by data-date attribute.

This is how far I have gone, but without success.

var joint = array.join("<br/>");    
aka = jQuery(joint).find('a').sort(function (a, b) {
    return '<li>' +a.getAttribute('data-date') - +b.getAttribute('data-date') + '</li>';
})

Why aren't you using an actual JavaScript array to represent your data instead of DOM elements? — Benjamin Gruenbaum, Jul 03 '13 at 22:52
this data comes from different functions. in wordpress $notifications are called like $notifications = bp_core_get_notifications_for_user( bp_loggedin_user_id() ) can I represent it in JS inside this script? I was thinking doing something similar but stuck with multidimensional arrays .. where sorting would become much painfull — CBeTJlu4ok, Jul 03 '13 at 22:56
@Blender yeaah, I will rewrite it nicely in the end ))so I don't use — CBeTJlu4ok, Jul 03 '13 at 22:57
@Mpa4Hu I've posted a solution on how to re-order your List based on the data-date. — Menelaos, Jul 04 '13 at 00:13

score 3 · Accepted Answer · edited May 23 '17 at 12:05

There are two solutions, these being one to use javascript and one to use PHP.

Pure Javascript Solution:

Here is how to sort your <li> based on the data-date attribute.

I've included both date based and string based sorting.

JSFiddle: http://jsfiddle.net/xZaeu/

<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<body>

<ul id="ulList">
<li><a data-date="2013-09-16 11:44:50" href="http://example.com/url/">09!</a></li>
<li><a data-date="2013-08-16 11:44:50" href="http://example.com/url/">08!</a></li>
<li><a data-date="2013-07-16 11:44:50" href="http://example.com/url/">07!</a></li>
<li><a data-date="2013-11-16 11:44:50" href="http://example.com/url/">11!</a></li>
<li><a data-date="2013-10-16 11:44:50" href="http://example.com/url/">10!</a></li>
<li><a data-date="2013-06-16 11:44:50" href="http://example.com/url/">06!</a></li>
</ul>

<script>

function compareDataDates(a,b)
{
    var match = a.match(/^(\d+)-(\d+)-(\d+) (\d+)\:(\d+)\:(\d+)$/);
    var date1 = new Date(match[1], match[2] - 1, match[3], match[4], match[5], match[6]);

    match = b.match(/^(\d+)-(\d+)-(\d+) (\d+)\:(\d+)\:(\d+)$/);
    var date2 = new Date(match[1], match[2] - 1, match[3], match[4], match[5], match[6])

    return date1 - date2;
}

var list = $('#ulList');
var listItems = list.find('li').sort(function (a, b) {
        return compareDataDates($(a).find('a').eq(0).attr("data-date"), $(b).find('a').eq(0).attr("data-date"));
        //return $(a).find('a').eq(0).attr("data-date").localeCompare($(b).find('a').eq(0).attr("data-date"));
    });
list.find('li').remove();
list.append(listItems);
</script>

</body>
</html>

Both String and date comparison work since your using the specific format, though the string based comparison would fail in a situation where you have:

<li><a data-date="2013-06-16 11:44:50" href="http://example.com/url/">06!</a></li>
<li><a data-date="2013-6-16 11:44:50" href="http://example.com/url/">6!</a></li>

References used cooking this up:

Pure PHP Solution:

Something along the lines of...

   <?php
    //Other PHP code here...
   $arrayForSorting = new array();

   foreach ($notifications as &$value) 
   {
      $temp = addslashes($value);
      array_push($arrayForSorting,"<li>".$temp."</li>");  
   }

   //Sort the array
   asort($arrayForSorting);

   foreach ($arrayForSorting as &$value) 
   {
     echo $value;
   }

   ?>

References:

http://php.net/manual/en/array.sorting.php

thanks, that did the trick, I used string based javascript solution. final question, how to make it work in reverse ? ))) for now, it goes from oldest date and goes to current, I want it to start from current — CBeTJlu4ok, Jul 04 '13 at 11:06

compare two dates with javascript extracted from HTML5 data

1 Answers1

Pure Javascript Solution:

Pure PHP Solution: