Formating multiple php dates with jquery

Question

I have dates in the format yyyy-mm-dd hh:mm:ss from the PHP date('Y-m-d H:i:s') to fit in my mysqli database. I want it to be in these formats:

1) /*x hours ago*/ <span class="time">2014-02-24 10:38:19</span>

2) /*Yesterday*/ <span class="time">2014-02-23 16:38:19</span>

3) /*Feb 22nd*/ <span class="time">2014-02-22 16:38:19</span>

4) /*2013 Feb 22nd 16:38*/ <span class="time">2013-02-22 16:38:19</span>

I am using the plugin jquery-dateFormat and I have done this. Which gets each individual one into the correct format:

if ("<?php echo $date ?>" === $.format.date($('.time').html(), "yyyy-MM-dd") || "<?php echo $yesterday ?>" === $.format.date($('.time').html(), "yyyy-MM-dd")) {
    $('.time').html($.format.prettyDate($('.time').html()));
} else if ("<?php echo $year ?>" !== $.format.date($('.time').html(), "yyyy")) {
    $('.time').html($.format.date($('.time').html(), "MMM D - yyyy"));
} else {
    $('.time').html($.format.date($('.time').html(), "MMM D"));
}

An example html document:

<span class="time">2014-02-24 10:38:19</span> <p>
<span class="time">2014-02-23 16:38:19</span> <p>
<span class="time">2014-02-22 16:38:19</span> <p>
<span class="time">2013-02-22 16:38:19</span> <p>

I want the output of this to be:

x hours ago

Yesterday 

Feb 22nd 

Feb 22nd - 2013

Currently the code above this will only format the first time not all of them?

To clarify, what you want is to convert a date like `2014-02-24 00:00:00` to `X hours ago`? — rationalboss, Feb 24 '14 at 04:31

davur · Accepted Answer · 2014-02-24T06:42:02.690

Edit:

If you would rather roll your own, the main points I can make on your existing code is:

Try using jQuery's $.each() function and $(this) in your code to loop over each of the tags and process them one at a time. When you do $('.time') and there are multiple matches, jQuery returns an array of objects which cannot easily be used in an if statement in the way you are trying to use it.

This slightly modified version of your code does do the trick:

var today = "<?php echo $today; ?>",
    yesterday = "<?php echo $yesterday ?>",
    year = "<?php echo $year ?>";

$('.time').each(function() {
   $this = $(this);
   if (today === $.format.date($this.html(), "yyyy-MM-dd") || yesterday === $.format.date($this.html(), "yyyy-MM-dd")) {
      $this.html($.format.prettyDate($this.html()));
   } else if (year !== $.format.date($this.html(), "yyyy")) {
       $this.html($.format.date($this.html(), "MMM D - yyyy"));
   } else {
       $this.html($.format.date($this.html(), "MMM D"));
   }
});

See jsFiddle http://jsfiddle.net/YZS49/1/

However, you might still want to consider using the plugin mentioned below.

Original (still my suggestion):

You might be interested in moment.js. It has built in relative time function called fromNow().

For example use this PHP:

<p><abbr class="time" title="<?php echo date('Y-m-d H:i:s'); ?>"><?php date('M dd'); ?></abbr></p>

To generate HTML like this:

<p><abbr class="time" title="2012-02-22 20:20:20">Feb 22</abbr></p>
<p><abbr class="time" title="2014-01-22 20:20:20">Jan 2</abbr></p>
<p><abbr class="time" title="2014-02-24 15:20:20">Feb 24</abbr></p>

(The short version can be something that is presentable if javascript does not work)

along with javascript:

$('abbr.time').each(function(){
   $this = $(this);
   $this.text(moment($this.attr('title')).fromNow());
});

Will produce something along the lines of:

<p><abbr class="time" title="2012-02-22 20:20:20">2 years ago</abbr></p>
<p><abbr class="time" title="2014-01-22 20:20:20">a month ago</abbr></p>
<p><abbr class="time" title="2014-02-24 15:20:20">28 minutes ago</abbr></p>

(The javascript replaces the text inside the tags, but the leaves the title. This means the users can hover their pointer over the "2 years ago" and still see the exact timestamp.

The plugin also supports various languages and time formats - read the docs.

By default moment.js actually prints "a day ago" instead of "yesterday". But that can also be customized as per this question/answer http://stackoverflow.com/questions/10967736/how-to-use-moment-js#answer-13515557 — davur, Feb 24 '14 at 05:09
using moment.js is easy to manipulate with time, but he may interested in java script ,i think so — Karthick Kumar, Feb 24 '14 at 05:12
@KarthickKumarGanesh If one wants to write it themselves, that is of course their choice. But I find it is rarely worth it, when an open source community with 178 contributors (so far) already maintain and have addressed all sorts of edge cases that one developer alone is unlikely to discover. I would use moment.js any day rather than reinventing the wheel. Also, the question clearly uses php and jquery already, would "java script" be preferred over moment.js - which is itself javascript. — davur, Feb 24 '14 at 05:22

score 1 · Answer 2 · answered Feb 24 '14 at 09:56

1

This works!

$( '.time' ).each(function( index ) {
if ("<?php echo $date ?>" === $.format.date($(this).html(), "yyyy-MM-dd") || "<?php echo $yesterday ?>" === $.format.date($('.time').html(), "yyyy-MM-dd")) {
    $(this).html($.format.prettyDate($(this).html()));
} else if ("<?php echo $year ?>" !== $.format.date($(this).html(), "yyyy")) {
    $(this).html($.format.date($(this).html(), "MMM D - yyyy"));
} else {
    $(this).html($.format.date($(this).html(), "MMM D"));
}
});

answered Feb 24 '14 at 09:56

maxisme

3,974
9
47
97

Why that is pretty much the same as the code snippet I added to my answer 3 hours before this. And this code actually isn't complete, the comparison of 'yesterday' against $('.time') would need to be $(this) too. Or better yet when you need to call $(this) 7 times like you do here, it is better to cache the result in a variable like in the so $this = $(this) and then just use $this instead. – davur Feb 25 '14 at 01:35
How come? -> to the last bit? – maxisme Feb 25 '14 at 01:38
How come we use `$this = $(this)`? Because `$()` is a function and when you do `$(this)` you are actually calling a function on the `this` object to "jQuerify" it which involves a little processing work (not a whole lot, but work nonetheless). So instead of calling $(this) 7 times per `each` `.time` tag, you can save the result of that work into a local variable thereby only performing the "jQuerification" once for each `this` object. – davur Feb 25 '14 at 01:48

Formating multiple php dates with jquery

An example html document:

I want the output of this to be:

2 Answers2