Dates across programming languages tend to be problematic when we don’t have a powerful tool for them. The same thing happens in JavaScript: default Date object that we build in is usually insufficient. And here is the place where Moment.js comes.

What’s Moment.js?

Very briefly, vanilla library is a JavaScript code for manipulating dates and time, without other dependencies provided; it’s a powerful tool for parsing, validating and displaying dates. When dates should be displayed in a localized format provided by user location and the right format, it supports internationalization and time zone – which is quite important for developers.

Alternatives for Moment.js

Of course, there are some other tools that you can use instead of Moment.js, eg.:

Datejs – “Datejs is an open-source JavaScript Date library for parsing, formatting, and processing.”
XDate – “XDate is a thin wrapper around JavaScript’s native Date object that provides enhanced functionality.”
YUI DataType – “The DataType Utility is a collection of classes that provides type-conversion and string-formatting convenience methods for numbers, dates, and XML documents.”

And that’s basically all. There are not many more libraries that only give us tools to control date. We can also mention sugar library and any other kind of frameworks that have some limited support for Date object, but it’s not our case. In fact, none of the listed libraries are.

Why Moment.js

It works in both the browser and Node.js environments. When providing a library that manipulates time, it’s very important to work across any frontend and backend as well. I truly believe it’s the best JavaScript library to use instead of the Date object, with a significantly better API.
It supports i18n (internationalization) and l10n (localization) which is particularly important for frontend developers. This means that they don’t have to provide support (like generating translation files) for additional translations for languages that are already implemented in our applications.
The bundle of available options is amazing: it provides almost everything that a frontend developer may use in an application. Honestly, I cannot figure out a situation in which I would have to override or extend its functionalities.

How To, the Ninja Skills

Installation and working with Moment.js are a piece of cake. Nowadays, when we have tools like bower or npm, it’s done almost automatically:

Bower

bower install --save moment

The –save option will also add ‘moment’ as a dependency to your bower.json application file. You can remove this option if you wish.

NPM

npm install moment

Other installation could be found on Moment.js docs page.

Usage with:

Require.js

Note that we’ve got some files here, not only moment-with-locales.js. There are also:

locales.js
locales.min.js
moment.min.js
moment-with-locales.js
moment-with-locales.min.js
tests.js

I’ve chosen moment-with-locales.js only for the purpose of this article.

AngularJS

Installation:

bower install angular-moment

Dependency:

var app = angular.module('app', ['angularMoment']);

Usage as dependency in services or controllers:

Or if you have only link function, move the moment dependency from:

controller: function ($log, moment) {

to:

app.directive('myDirective', function($log, moment) {

and use it in a link

link: function (scope, element, attrs) {
$log.log(moment().format('LL'));
}

Usage as filter in view:

&lt;span&gt;{{date | amDateFormat:'LL'}}&lt;/span&gt;

i18n (internationalization) in Moment.js with AngularJS

We all want to display the date and time in an application in a correct format, we need to focus on the user’s local preferences or anything that would tell us in what time zone the user is. For this purpose, moment.js is also the best choice. Let me explain why.

Do you know how many date formats exist? Only to start with, we’ve got:

Polish: ‘DD.MM.YYYY’
Macedonian: ‘D.MM.YYYY’
English (Great Britain): ‘DD/MM/YYYY’
French: ‘DD/MM/YYYY’
Slovenian: ‘DD. MM. YYYY’
Swedish ‘YYYY-MM-DD’

… and many, many others. Without a ready package of localized dates, it would be a nightmare to set them all separately. Moment.js provides it under the terms of the MIT license, making it free to use.

To set up locale with moment, we have to use:

Moment supports country code with dialect in many formats:

You can change locale in your application at any time, by using it with angular-moment: include amMoment service and call changeLocale method. Without amMoment, you can do it with moment as well.

If you want to learn more about i18n, you can find it in the Moment.js documentation.

Plugins

There are also some other plugins for moment.js:

Strftime – a tip of the hat to the PHP developers: “If you are more comfortable working with strftime instead of LDML-like parsing tokens”
Date Ranges
Twitter – times like on twitter

… and many, many more. To learn some extra information, check Moment.js plugins.

Articles by Przemysław Czekaj

Why Should You Use Moment.js and How to Do It Effectively