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
– rationalboss, Commented Feb 24, 2014 at 4:31

davur · Accepted Answer · 2014-02-24 06:42:02Z

1

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.

edited Feb 24, 2014 at 6:42

answered Feb 24, 2014 at 4:55

davur

1,4381 gold badge16 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

davur Over a year ago

By default moment.js actually prints "a day ago" instead of "yesterday". But that can also be customized as per this question/answer stackoverflow.com/questions/10967736/…

Karthick Kumar Over a year ago

using moment.js is easy to manipulate with time, but he may interested in java script ,i think so

davur Over a year ago

@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.

maxisme · Accepted Answer · 2014-02-24 09:56:02Z

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, 2014 at 9:56

maxisme

4,3059 gold badges57 silver badges106 bronze badges

3 Comments

davur Over a year ago

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.

maxisme Over a year ago

How come? -> to the last bit?

davur Over a year ago

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.

Collectives™ on Stack Overflow

Formating multiple php dates with jquery

An example html document:

I want the output of this to be:

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

An example html document:

I want the output of this to be:

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related