Question

93

Use moment.js to convert date format

rated 0 times [ 98] [ 5] / answers: 1 / hits: 39871 / 12 Years ago, thu, december 6, 2012, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

benitoh

Add To Favorites

Follow

Total Points: 150

Total Questions: 113

Total Answers: 104

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

benitoh questions

1 this.$refs empty with Vue 3 Options API

Sun, Mar 21, 21, 00:00, 3 Years ago

1 Close sidebar menu when click outside of it and when click on menu item

Fri, May 22, 20, 00:00, 4 Years ago

1 TypeORM Custom Repository, select distinct values from specified column

Mon, May 4, 20, 00:00, 4 Years ago

1 How can I enable the console log in VUE-CLI during development

Tue, Dec 17, 19, 00:00, 5 Years ago

1 String interpolation in graphQL query

Mon, May 13, 19, 00:00, 5 Years ago

View All

answered 12 Years ago marquezb · Accepted Answer

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