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
– Benjamin Gruenbaum, Commented Jul 3, 2013 at 22:52
Creating a ton of <script> tags is a really bad idea. Why don't you create a nicely-formatted JSON string with PHP and pass it off to JavaScript? — Blender
– Blender, Commented Jul 3, 2013 at 22:53
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
– CBeTJlu4ok, Commented Jul 3, 2013 at 22:56
@Blender yeaah, I will rewrite it nicely in the end ))so I don't use <script> tags repeadtly. thanks — CBeTJlu4ok
– CBeTJlu4ok, Commented Jul 3, 2013 at 22:57
@Mpa4Hu I've posted a solution on how to re-order your List based on the data-date. — Μenelaοs
– Μenelaοs, Commented Jul 4, 2013 at 0:13

Community · Accepted Answer · 2017-05-23 12:05:28Z

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

Collectives™ on Stack Overflow

compare two dates with javascript extracted from HTML5 data

1 Answer 1

Pure Javascript Solution:

Pure PHP Solution:

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Pure Javascript Solution:

Pure PHP Solution:

2 Comments

Linked

Related