Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:19Length:2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.5 Formatting Dates

In this lesson, you will learn how to add the Moment.js framework to your Meteor project and then use it to format the dates that you’re pulling in from your Mongo Collections.

4.5 Formatting Dates

Hello and welcome back. We've now created the ability to show all of our posts from our database. But when our database formats are dates, it displays them in a very unreadable fashion. And what I wanna do is I wanna take this date and reformat it into a more user friendly format. And we’re gonna use the Moment.JS or Moment JavaScript package to do this, because Moment makes it very easy to kind of reformat your date into whatever format you want. So if you want more information about Moment.js you can just do a search for Moment.js in Google and you should find plenty of resources. You can find the Moment.js website, it's very easy to use. And what we're gonna do is, first of all, we need to install it on our website, because our media site does not have moment.js by default. So we need to jump into our command prompt, here, and I don't wanna close our server command prompt. So we're just gonna open another one. And I'll drag that over. And then navigate to our site. And once you're in your website folder, once you're in your social lite folder, the way we're gonna install this framework is we're gonna type meteor space add. And then for the moment framework we're gonna type moment.js: moment. And then when we hit Enter, it will install that package for us. And then once that's installed, we should be able to use it really easily in our site. So we're gonna go to, first of all, you'll notice our site just refreshed there because we made a change to our website. But now, let's jump in to our code editor and let's take a look at how we're gonna do this. So in our userpost.html file inside our ui folder, this is our template for a single user post, where we have our user name, our created date and our text. Now, we have our createdDate here, but I wanna be able to format that date whenever we pull it in. And in order to do that, we're gonna create or register our own helper here. And this is gonna be a little bit different than what we think of as helpers, what we've already used as helpers such as this userposts helper. Because with these helpers we're just grabbing a value that we're then going to inject into the page. For example, we took this userposts item and in our body.html we injected that template there. But what I wanna do now is I wanna create a helper that will format this date, when we place it on the page. And so it's gonna be a little bit different than the helpers we've created before. And the way we do that is just below all of our import statements, we're gonna do it there. I'm gonna type template., and then there's a method called registerHelper, with a capital H. And then inside the parentheses for this method, the first thing it's looking for is the name of the helper. And we can give it whatever name we want to. I'm gonna call it formatDate, so we need to put this inside quotation marks. So we're gonna say format and then date with a capital D, comma space. And then the function that we want to run on whatever data we pass in. So this function, first of all, we need to pass some data into it. And the data we wanna pass in is the current date. So it's gonna be a date. And let's just call it date, we're gonna call this variable date. And then we'll put our opening and closing curly brackets for that function. And then inside the function we're going to use the moment.js framework to format that date. And so we're gonna return this value, so we're going to say return. And then the way this works in moment is we're gonna type in moment, all lowercase, and it looks like my auto correct just changes that for me. Let me hit Ctrl+Z a couple of times. Then we'll hit our parentheses again and we're gonna pass into the parentheses here the date that we want to format. So the date we wanna format is this date here that we've passed into our helper function. So we're gonna pass that same date value into moment and then we're gonna say .format and then we can pass in a format in the form of a string. So again, if you want to learn all the different formats you could possibly pass in then do a search for a moment.js online and you should be able to easily find that info. But what I wanna do, is I wanna pass in a format that looks like this. So these are all capital letters, we've got MM for two digit month, DD for two digit date, and then YYYY here for a four digit year. So now, that we've registered that helper, again it's called formatDate. I'm gonna copy that because we're gonna use this name here in a second. So now, that we've registered this helper, we can then go into our user post and paste that helper name where we have our created date. And then we're just gonna put a space after format date, and then we'll have the created date. So this is how you pass a value into a helper instead of using parentheses like you would with a normal function, you would just put a space after format date. And then it would pass this created date value into that format date helper. So let's see if that works. Let's save our file. Let's jump back to our browser. And when it refreshes, sure enough, we have a really nicely formatted date there and that works just fine. So again, you could do a quick search and find the Moment.js website and find the different formats that you could use. You could also append a time to the end of that if you want to show what time this was posted. But I wanna stick with that short date format. So thank you for watching and I'll see you in the next lesson.

Back to the top