CODEWITHSUNDEEP
javascriptjquerymomentjs
Mark Mitchell
Mark Mitchell

Reputation: 2297

Use moment.js to convert date format

I would like to convert the following dates using Javascripy/jQuery. My research seems to point to moment.js which looks awesome but I can't seem to nail it. (JS semi-noob)

<div class="date">01-06-2012</div> convert to display January 6
<div class="date">05-14-2012</div> convert to display May 14
<div class="date">06-16-2012</div> to display June 16

Also it would be awesome if the same logic can apply an additional class to the div if the date is within the last 24 hours, so I can style those a bit differently. Maybe have the dates within the last 24 hours add a class and instead of a date display "new".

Thanks!

Upvotes: 9

Views: 39909

Answers (1)

Peter Lyons
Peter Lyons

Reputation: 146164

$(function () {
  $('.date').each(function (index, dateElem) {
    var $dateElem = $(dateElem);
    var formatted = moment($dateElem.text(), 'MM-DD-YYYY').format('MMMM D');
    $dateElem.text(formatted);
   })
 });​

http://jsfiddle.net/x2fDP/

For part 2, try using new Date().getTime() - textMoment.valueOf()(where textMoment is the parsed moment instance created from the div's text) to obtain the number of milliseconds ago that date was and if that number is below your threshold, use $dateElem.addClass('new');

Upvotes: 24

Related Questions