Development

New Era: Computation of Time with Moment.js

February 1st, 2013

Calculating time values and displaying them correctly is not child’s play. There are lots of different units (Year, Month, Day, Hour etc.) and – more disturbing – different systems of numeration, none of which is decimal. But you need not fall into despair. Moment.js is there to help you. The small JavaScript library comes equipped with lots of nifty features for calculating time spans, converting international time formats and also cares for the output of the results. Needless to say that Moment.js works for different languages and time zones.


Homepage of Moment.js

Formatting of Time Values Fast and Simple

After having embedded the light-weight library into the head of your HTML document, you need nothing more than one simple line of JavaScript to enable the feature set of Moment.js. If you need to use the library in any other language than its English default, you will have to include the corresponding language file:

1
2
moment().lang("de");
moment().format("Do MMMM. YYYY");

In our example we change the language to German (de). The second line formats the output to the common way dates are displayed in German language. The abbreviations will not be new to you if you have used time and date functions before. We have M for month without a trailing zero, MM for month with trailing zero and MMMM for the name of the month fully written. The value Do outputs the day in the form of a value. In German language websites this would lead to the addition of a period right after the number value. In English this is entirely different. Here we add letters to the numbers like this: 1st, 2nd, 3rd and so on. I can imagine languages with even more complicated notations…

Moment.js is not limited to the formatting of the current time, but is able to format forever time value you want to process:

1
moment("01-31-2013, "DD-MM-YYYY").format("Do MMMM. YYYY"); // 31. Januar 2013

Moment.js is able to validate date values. It returns false, when it find an entry that cannot be a time oder date value:

1
moment("01-32-2013", "MM-DD-YYYY").isValid(); // false

Calculation of Time Spans and Durations

You know, things always get tricky, when you need to calculate with time values to find a time span value or a duration. In these hopefully rare occasions you convert time values to seconds, add or subtract two values and convert it back into a human readable format. Moment.js takes all of the pain out of this procedure and flawlessly executes it for you.

1
moment().add("days", 7).add("months", 1);

In this example we add seven days and one month to the current date. The result is formatted using format() afterwards. Of course you can as well subtract().

If you need to display time values in relation to the current time, probably to show when something will happen or has happened, Moment.js provides you with the function fromNow():

1
moment("01-31-2013, "DD-MM-YYYY").fromNow();

Depending on how far back in history the calculated date lies, Moment.js displays the values in years, months, days, hours or minutes. Instead of simply showing the plain date value, Moment.js displays values as “three days ago” or “yesterday”.

The function humanizeDuration() displays fixed time spans in common notation:

1
moment.humanizeDuration(-1, "minutes", true); // one minute ago

Conclusion: Moment.js makes computation of times dead-simple. It is a full-fledged solution where the limits in your head are reached far earlier than the limits of the tool. This way you should never really run into trouble. Choose Moment.js for your everyday needs. As it can be used under the regulations of the MIT license, you need not think twice about it.

(dpe)

Denis works as a freelance web designer since 2005.

Tags: , , ,

6 comments for „New Era: Computation of Time with Moment.js
  1. Clumsy Hamster on February 1st, 2013 at 6:00 pm

    Kind of cool. My preference is doing all this on the server side and returning the value when I get the other stuff. Though, there are those situations where the server component isn’t a good solution so libraries like this is a nice to have.

  2. Seth on February 1st, 2013 at 7:58 pm

    Hey Denis,

    nice thing you have wrote, why don’t you add some function for returning strings, like “1 day ago”, “15 mins back” that will make it more interesting… if you like then i would like to enhance it

  3. Shoutheasken1961 on February 2nd, 2013 at 4:12 am

    Very interesting. The value Do outputs the day in the form of a value.

  4. Geert-Jan Brits on February 5th, 2013 at 10:36 pm

    @seth: that’s all available and more. It’s pretty excellent. Check out the site.

  5. gia may phat dien on February 20th, 2013 at 10:44 am

    Cool, so agree with Seth, hope to see your new work soon

  6. venkat on September 6th, 2013 at 10:27 am

    Hi,
    i want to take separate month and date from date,
    var z = moment().format(“12-12-2013″);
    alert(z);
    now it is showing “12-12-2013″ in alert ,for the same date i want to show separate month and date, how to split date and month please help me anyone…..