Format date to human readable date

1

Hey guys.

I’m trying to create a project in Meteor, which should work just like Facebook etc. At standard, when using Collection2, i’m inserting the createdAt date into my mongoDB. When printet out on the site, the date looks like this:

Wed Mar 16 2016 12:07:08 GMT+0100 (CET)

I’ve looked at MomentJS but can’s seem to use it in practice. I want to date to be a human readable date, where it says “2 hours ago”, “17. february 19:25” and so on.

Can anyone help me with that and maybe show give me an example of how to use it?

Thanks in advance <3

1 Like
2

Hi,

you should definitively use momentJS. It is a very good library
First you have to convert this date to a duration.
Then you can humanize it and get the result you want

Humanize is available from 1.6.0+
http://momentjs.com/docs/#/durations/humanize/

Bye!

1 Like
3

Thanks for the quick answer, Ciro207!

Can you show me how to format the date with this?

In my collection i add the CreatedAt:

createdAt: {
       type: Date,
       label: "Created At",
       autoValue: function() {
           return new Date()
       },
       autoform: {
            type: "hidden"
        }
   }

When i print out the date, i just do {{createdAt}} in the HTML.
How do i make a event / helper to format this date with MomentJS?

4 
Template.registerHelper('fromNow', function(datetime) {
  return moment(datetime).fromNow();
});

then use fromNow helper with createdAt as an argument.

1 Like
5

Hey @brajt I’ve trying working with it, but can’t seem to make it work. In my application i have these posts. I have the following:

Posts.html
Posts.js

Post.html
Post.js

I’m guessing that i should use the helper in Posts.js, where i print out all the posts. But when i try to return the date, nothing happens. I’ve tried {{fromNow}} and console.log but nothing shows.

6

Can you show us your code? What your template helper looks like, where/how your attempting to show the date in your HTML, etc. Any code you can help share will help us troubleshoot.

7

Ofc. I have uploaded my project to github. https://github.com/Fillah/MySocialplatform
For the posts, go to Client --> post -->

8

To do this you need to create a template helper http://docs.meteor.com/#/full/template_helpers which will format the date for you

It works like this:

Somewhere in your client code (probably in posts.js) you define a template helper to do the formatting, e.g.

Template.Posts.helpers({
  myCustomTemplateHelper: function (dateTime) {
    return moment(dateTime).fromNow();
  }
});
  • When rendering the template Meteor will encounter a reference to your template helper {{myCustomTemplateHelper ...
  • This will call the helper function - you pass the createdAt date/time into the helper by putting it after the template helper name, so it reads like this:
    {{myCustomTemplateHelper createdAt}}
  • createdAt will become the dateTime argument in the helper
  • The custom template handler will be executed, formatting the date for you in whatever way you want it to do so (see momentjs docs) and return it
  • The result of the helper will be added in place of the {{myCustomTemplateHelper createdAt}}
4 Likes
9

Thank you for the reply! It makes total sense and works perfectly :slight_smile:

10

is there any way to make this reactive? Like when the post is created it says “a few seconds ago”. When it has been up for like a minute or so, then automatically update. Just like this date on the site.

11

Yes, but as the date updates every ms in the browser, you would have to allow for that … or you could use this package: https://atmospherejs.com/glasser/reactive-fromnow, which does that for you.

2 Likes