Quick Tip: Handle Date and Time Like a Boss with moment.js

Don’t you just hate working with JavaScript’s date and time functions? Have you seen how much code it takes to simply print how much time has passed since a certain event? Luckily for you, there is a small JavaScript library called moment.js that you can drop in your website folder and use right away.

Moment.js

Moment.js

Cool things you can do with it

The first stop is to create a new moment object. This is done by calling the global moment() function. If you leave it empty, it will use the current time. Otherwise you can pass a timestamp, an array or string with a format that will be parsed into a date.

Create a moment object

// Create a new moment object
var now = moment();

// Create a moment in the past, using a string date
var m = moment("April 1st, 2005", "MMM-DD-YYYY");

// Create a new moment using an array
var m = moment([2005, 3, 1]);

Notice that just like in the JavaScript Date() object, months start from zero, so 3 is April.

Working with time

// What time is it?
console.log(moment().format('HH:mm:ss')); // 16:13:11

// What day of the week is it?
var day = moment().day(); // 5
console.log( moment.weekdays[day] ); // Friday

// What is the current month name?
console.log( moment.months[moment().month()] ); // August

// What time is it in London? (time zone: UTC)
console.log( moment.utc().format('HH:mm:ss') ); // 13:23:41

// What time is it in Japan? (time zone: UTC+9)
console.log( moment.utc().add('hours',9).format('HH:mm:ss') ); // 22:23:41

As you can see, the format method is what you need to turn a moment object into something readable. There are plenty of formatting options to choose from and are easier to remember than what you get in PHP’s date function.

Working with dates

// How old are you?
var m = moment("Mar 26th, 1989", "MMM-DD-YYYY");

console.log('You are '+m.fromNow() + ' old'); // You are 23 years ago old

// Oops. We better leave the "ago" part out:
console.log('You are '+m.fromNow(true) + ' old'); // You are 23 years old

// When will the next world cup be?
console.log( moment('June 12th, 2014','MMM DD YYYY').fromNow() ); // in 2 years

// What will be the date 7 days from now?
console.log( moment().add('days',7).format('MMMM Do, YYYY') ); // September 7th, 2012

The fromNow() method is very useful in producing readable time differences. It automatically scales the period it returns from seconds to years.

Time duration

// Find the duration between two dates
var breakfast = moment('8:32','HH:mm');
var lunch = moment('12:52','HH:mm');
console.log( moment.duration(lunch - breakfast).humanize() + ' between meals' ) // 4 hours between meals

The duration method takes a number of milliseconds and creates a new object. By using its humanize() method, we get human readable version.

No time to lose!

I hope that this short overview gave you a good idea of what is possible with moment.js. If you want to learn more, follow the project on github and read through the examples and documentation on their homepage.

Join our newsletter and get our PSDs!21,323 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

♥ 21,323 developers love it

7 Comments

  1. Anton says:

    Very nice article, thank you Martin!

  2. mubasshir pawle says:

    Thats really cool...from long time i was looking for something like this

  3. Ron says:

    Thank's a lot. That is very helpful. Simple time duration is what i've been looking for.

  4. Taylor says:

    I'm actually building my own project management app and it would be wonderful to have something like moment.js but in a php class.

  5. ali says:

    wow
    very simple and powerfull

  6. Linas says:

    Something new, thanks.

  7. egiova says:

    I still don´t understand how to include this function in a page... is there a call to implement directly in HTML page? It's not clear actually.

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links