Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 712
Mark Mitchell Avatar asked Dec 06 '12 05:12

Mark Mitchell


People also ask

What is moment () format?

moment(). format(); moment(). format(String); This is the most robust display option. It takes a string of tokens and replaces them with their corresponding values.


1 Answers

$(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');

like image 191
Peter Lyons Avatar answered Oct 21 '22 20:10

Peter Lyons