Date Handling in JavaScript is Hard – Make It Easy With Moment.js

Dealing with Time

I have several web app projects that all deal with timestamps in some manner. For example they

• Parse date from a service response
• Render to screen in various long and short formats
• Logically compare against each other

Dealing with all this stuff is horribly boring. Last thing I want to is build core code that does much of any of that stuff. Time comes from service responses in various formats, displaying dates in longer or shortened formats is miserable, and logical comparisons between dates with times never seems all that logical.

Guess what, there’s an awesome Javascript library that helps make all of this easy and enjoyable. Check out this:

• Moment.js
• “A lightweight (4.8k) javascript date library for parsing, manipulating, and formatting dates.”, their website
• Author: Tim Wood (https://twitter.com/momentjs)
• Main Page: http://momentjs.com/
• Docs: http://momentjs.com/docs/
• GitHub: https:// github.com/ timrwood/ moment

Here’s a couple of ways I use it.

Service Response Parsing

I have a PHP service that UPDATE user rows in a MySql database and login_at is set via the now() function. That value comes back looking like this:

When I do a FQL command querying user posts through the Facebook SDK it gives back updated_time looking like this:

Do I want to parse through these? No way! What a waste of time. I want to add value to my customers by delivering features and not going insane.

Moment.js constructs with both of those timestamp formats easily. In the second example above the timestamp is formatted native to Moment.js. I simply do this:

In the first case it’s a little different and I give a “hint” as to how the timestamp is formatted:

Bam. Parsed. So simple. Let’s display these things.

Display Rendering

Suppose I have some time. An important core-data attribute. I can easily have several screens displaying the same timestamp, but in different formats. One longer when the screen has lots of space and specificity, and shorter in an overview page jammed with data.

Moment.js handles this so simply:

“Sun the 12th”

“Sunday, August 12th 2012, 12:00:00 am”

Logical Comparisons

In my example earlier, given a last login timestamp and a series of news with various update times, I fed the timestamps into Moment constructing two objects. Now I can compare them just like this

And There’s More

This doesn’t cover all the things that Moment.js does. Date math is simple through adding days or hours. Validate user input. Support foreign language with internationalization. Slice up and get individual parts of a timestamp.

There’s so much stuff in there. Go get Moment.js already. Be more productive and do something awesome today!

You may enjoy my book if you learned from this article. It’s called Responsive Web Design Toolkit: Hammering Websites Into Shape. Get it on Amazon today!