moment.js
I’m back after a very long hiatus to talk to you about an excellent JavaScript date and time library that I have recently found called momentjs. Messing around with dates and times in JavaScript can be a huge pain with the default functionality of the Date
object, especially when it comes to parsing and formatting dates in various formats. I used to use the horribly-outdated-and-with-bad-docs-and-consistency date.js, after which moment.js is a breath of fresh air. Moment.js seeks to simplify that entire process by being extremely simple to use; it only has about 10 basic functions in total, which nevertheless are very useful and powerful, especially when developing applications or plugins driven by dates such as calendars.
In this article I will go over how some basic functionality of moment.js, as well as some features I think are really cool and useful like its formatting and parsing. First off, we are going to capture a moment by calling the following:
var m = new moment();
That’s it! We can then see the formatted version of this date including timezone by calling the following:
m.format();
/// "2013-07-09T20:48:13+10:00"
But oh no we won’t stop there! Let’s say I wanted to return my date in the Australian date format, which is DD/MM/YYYY. Moment.js can do that in the same line! (the case is slightly different from the normal formatting, luckily they have a guide).
m.format("DD/MM/YYYY");
/// "09/07/2013"
Alright that’s pretty cool. Let’s say though that we have an existing date that we are pulling from the database, or one that the user is inputting in a specific format. No matter, moment.js handles that too by letting you specify the format when you create a new moment.
var m = new moment("25/09/1990","DD/MM/YYYY");
m.format();
/// "1990-09-25T00:00:00+10:00"
Amazing! But that’s not the coolest thing, oh no. Not by a longshot. What if by some chance your users were unpredictable and did not follow your sensible date inputting guidelines. No worries at all says moment.js, you can specify multiple formats for your dates, and any matching one will parse the input!
var m = new moment("25-09-1990",["DD/MM/YYYY", "DD-MM-YYYY"]);
m.format();
/// "1990-09-25T00:00:00+10:00"
For you ASP.NET users out there, you’ll know that .NET returns dates via JSON in a confusing format, such as /Date(1198908717056)/
or /Date(1198908717056-0700)/
, that trips up most interpreters. Not moment.js though!
var m = moment("/Date(1198908717056-0700)/");
m.format();
/// "2007-12-29T16:11:57+10:00"
Man this library is awesome! One last cool example just in case you are not completely sold. Remember how I said this would be useful for calendar applications? Moment.js even has a built-in function for displaying the date as it would be shown on a calendar:
var m = new moment();
m.calendar();
/// "Today at 8:48 PM"
And I’ll leave it there! That’s some of the coolest and most useful features of moment.js that I’ve found so far. Their docs for the project are huge though, so you should have a read of them as well, there are lots of other interesting tidbits in there. They can be found on the same website as the main page.
After this post I will be trying to keep this blog a little more current, thanks for keeping up your readership despite the lack of updates! I hope I can continue writing useful posts for developers out there. Thanks and happy date formatting!