How to use Moment.js?

Question

I'm unable to follow the Moment.js documentation, and need some help with setting it up. I've referenced the moment.min.js file properly on my webpage like so:

<script src="/js/moment.min.js"></script>

Coming to the HTML part of my webpage, I have two different datetime's on the same page:

Published Date

<time class="pubdate" datetime="2012-06-09T12:32:10-04:00" pubdate>
    June 09, 2012
</time>

Last Modified Date

<time class="updated" itemprop="dateModified" datetime="2012-06-09T12:32:10-04:00">
    June 9, 2012 ~ 12:32
</time>

Important! The relative date parsing shouldn't go beyond "yesterday". As for everything beyond, the <time> tags should display the exact datetime's they would without the JavaScript -- i.e. Moment.js shouldn't touch or parse dates that are past "yesterday".

Now, to make the library do its job as aforementioned, I need to call a function after the library reference. So, the question is, what should the function be? (Using jQuery is fine, as I already reference the library on my webpage.)

Answer 1

Please specify your question. I'm assuming you want a relative date parsing and the maximum should be "yesterday".

I never used moment.js but as far as the docs say, it's pretty simple.

Use var now = moment(); as your current date. Then parse every time-Tag in your DOM with var time = moment($(e).attr('datetime'));

To check the difference use the diff() method:

if(now.diff(time, 'days') <= 1) {
    // getting the relative output
}

Use var ago = now.from(time) to get the relative output and replace the time in your DOM with your ago variable.

Update based on comment:

Okay, well untested, but that's the basic idea:

Updated the code.

var now = moment();

$('time').each(function(i, e) {
    var time = moment($(e).attr('datetime'));

    if(now.diff(time, 'days') <= 1) {
        $(e).html('<span>' + time.from(now) + '</span>');
    }
});