Moment.js text formatting and classes

Question

First time posting. So I have to format some text in a element that looks like this

<div class="entry-time">
  2012-05-30T20:11:06+00:00 
</div>

I'm trying to format this out to something more readable with moment.js. I can only do this from the front end with javascript. I wrote a function that looks like this.

$(document).ready(function() {
    function formatDate(date) {
        formattedDate = date.text();
        var d = moment(formattedDate, "YYYY-MM-DDTHH:mm:ss");
        $(date).html( d.format("dddd, MMMM Do YYYY, h:mm:ss a"));
    };

    formatDate($('.entry-date'));
});

This works if there is one element but when there are multiple elements it will format everything into one date. I know this has something to do with jQuery pulling in an array of elements but I have no idea how to do what I did to each element with the class of entry-date.

Can anyone help? Thank you in advance.

Answer 1

At the heart of what's wrong is that the jQuery .text() method gets "the combined text contents of each element in the set of matched elements, including their descendants" (api.jquery.com/text) rather than iterating over the set of elements as you intend.

Something like this should work, passing a function into the jQuery .html() setter method:

$(".entry-date").html(function(index, value) {
    return moment(value, "YYYY-MM-DDTHH:mm:ss").format("dddd, MMMM Do YYYY, h:mm:ss a");
});

Answer 2

You'll need to traverse each match using the .each method of jquery:

$(date).each(function(){  Format date here  });

And this goes into your now existing function formatDate.

Answer 3

You will want to loop through the elements passed to the function. This could be done with a $.each() in jQuery. Here's a quick example:

http://jsfiddle.net/n1ck/QQYq2/1/

$(function(){
    function formatDate(dates) {
        dates.each(function(){
            //get date
            formattedDate = $(this).text();

            //format it
            var d = moment(formattedDate, "YYYY-MM-DDTHH:mm:ss");

            //replace it
            $(this).html(d.format("dddd, MMMM Do YYYY, h:mm:ss a"));
        });
    };

 formatDate($('.entry-time'));
});
​

Answer 4

Based on your current code you can modify your formatDate function like this

 $(document).ready(function() {
    function formatDate(date) {
      date.each(function(){
        var formattedDate = $(this).text();
        var d = moment(formattedDate, "YYYY-MM-DDTHH:mm:ss");
        $(this).html( d.format("dddd, MMMM Do YYYY, h:mm:ss a"));

      });
  };

 formatDate($('.entry-time'));
});

And you actual class name is entry-time but you are calling like formatDate($('.entry-date')); which will get nothing as the class entry-date doesn't exist.

Working Fiddle​

Answer 5

You have to use each because your selector is a class(since you used '.') which can be used with multiple DOM's as well..so may be your jquery thing is returning an array which is to be traversed using each.

$('.entry-date').each(function(){
   formatDate($(this).val());//if it is a text box
});

OR

$('.entry-date').each(function(){
   formatDate($(this).text());//if it is a label
});