NPM Modules You Should Be Using: momentjs

This is the first in a regular series which highlights some of the most useful npm modules out there. It’s easy to spend time home brewing your own solutions to problems when there are modules out there that could do all of the work for you. I hope this series will expand your knowledge of the modules which are available to you via npm, and in so doing save you valuable development time.

Momentjs is a date / time utility library. It has functionality for parsing, validating, manipulating and displaying dates.

JavaScript doesn’t have the best built in date / time functionality. If you take a look through the Date object’s methods you’ll see that in terms of displaying dates in certain formats and manipulating (adding / subtracting time) date, the functionality is very limited. This type of functionality is commonly needed, so it makes sense to use a library like momentjs to fill in the gaps in JavaScript’s core functionality.

I’m not going to go through all of the possible uses of moment. It has a large API, and reproducing the documentation that can be found on the momentjs website in tutorial format would be a waste of time. Instead I’m going to give you a couple of examples to give you an idea of what momentjs can do. Then I’ll set an exercise for you to complete, which will force you to explore moment’s API for yourself in order to complete.

Installing Moment

If you’re using node or working in the browser and using Babel, you can just do:

npm install –save moment

Then when you want to use it:

const moment = require(‘moment’);

If you’re working in the browser but not using modules and building with the help of Babel, you can just include moment.js using a script tag.

Fun With Dates

const moment = require('moment');

// We have the date something was posted in SQL format
// From this we want a pretty version of the date we can display
// We also want human readable text telling us how long ago it was posted
const postedDateSqlFormat = '2011-01-01 14:00:00';
const postedDate = moment(postedDateSqlFormat)
const prettyPostedDate = postedDate.format('ddd Mo MMMM YYYY');
const fromPostedDate = postedDate.fromNow();

console.log('Posted Date', prettyPostedDate);
console.log('Posted', fromPostedDate);

// Exercise
// Replace the ??? with a single function call that will give us a moment
// for a date 10 minutes in the future.
// Should log:
// 'Offer ends in 10 minutes'
// If you do it right
const offerEndDate = moment().???;
const offerEndsIn = offerEndDate.fromNow();

console.log('Offer ends', offerEndsIn);

The first part of the code above shows a little of what moment can do. The second part contains a small exercise for you to complete on your own.

The moment() function creates a moment object. This object encapsulates a date, and allows you to perform operations on it. If moment() is called with no arguments, the date will be the current date and time. It can also be called with an instance of a JavaScript Date object, or with a string representing a date, which it will attempt to parse. If it cannot parse the string and get a valid date from it, moment throws an exception. This is means it can be used for validating dates.

In the code we call moment() and pass it a string containing a date in SQL format. We now have a moment object for that date. We call format on this, passing a string containing some date formatting codes. See the momentjs documentation for full list of formatting codes. Finally we call fromNow() on the moment to give us the ‘10 minutes ago’ type string which is used on sites like Reddit to indicate when something was posted. The output is:

Posted Date Sat 1st January 2011

Posted 7 years ago

Of course the ‘Posted x years ago’ may be different for you if you run it sometime in the future. For me it was 6.5 years ago (it gets rounded to 7).

Try the exercise, and see if you can get the second part to work. It should only take one function call, and you only need to replace the ???, nothing else. Good luck.

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *