Formatting Dates with ember-moment

Published on Oct 07, 2016

You want to display dates in a human-readable format? ember-moment has you covered.


Links

Code

$ ember install ember-moment
{{moment-format comment.createdAt 'MMMM D, YYYY h:mm A'}}

Transcript

There are lots of situations where you’ll need to be able to display dates in your app. This is one example in the comment section of EmberSchool.com. Now this date looks very nice right now, but it wasn’t always like that. Let me show you what it looks like plain. This is what it looks like plain. It has all the information but it’s not pretty. It’s not in a format that humans want to read.

So how we got this far is we have a createdAt field which has the date attribute, so it’s being coerced into a certain type of date, and then we just display it in handlebars. But with moment, we can make this much better. So we’ll start off by installing ember-moment. Then we’ll take a look at the helpers that ember-moment offers us and see that we want moment-format. So let’s go ahead and add in moment-format. And what does that get us? Well, not very much. It actually makes it look even worse that the default ember formatting.

So to make it look right, we’ll need the outputFormat option on the moment-format helper. And to get the form of that, we’ll need to look at the Moment.js documentation. So the format can be a specific format like this, and the documentation for this can be found over here in docs/displaying/format. And it gives what each of these individual things turns into. You can get very, very specific with this. Or you can go to some of the defaults.

So we’re going to use three capital L’s, and this will show it in this format. There we go. That is pretty nice. So what if you don’t want one of these basic formats? Well, let’s go ahead and replicate this using some of these to get you a feel for how they work. So the first part we want to replicate is the month, the full month. So you can get that by putting four capital M’s. So we’ll have our four capital M’s, and then we’ll want just the number of the day. And that is the day of the month, just one capital D. Then next we’ll have a comma. That’s just a comma, and then just a space, and then the year. I believe that is four capital Y’s. And then we’ll be displaying the time in a nonmilitary format. So we’ll need... we’ll just do one H and then two M’s, with of course a colon in between because you need to tell it all of the punctuation. And we’ll look for the PM... Where is the PM? Here it is. Capital A. And when we change there is no change because we... oh, actually there is a change. We accidentally put this in military time, and Moment doesn’t know that we’re showing PM and military time because it’s just doing what we tell it to. So it’s a lowercase 'h' that we want. There we go. And we have it formatted exactly how we want it.

Now there are plenty of other things you can do with ember-moment, and we may cover those in a future video. But for now, you can look at the documentation, and it’s pretty good. If you can’t figure out how to do something from the ember-moment documentation, I recommend you look at the Moment.js documentation for the functions that have a similar name to the ember-moment. So if I want to know how moment-calendar works, probably start looking at some of these calendar docs. So good luck and I hope you enjoy using this awesome tool.

Subscribe to our mailing list