Feb 01 2013

New Era: Computation of Time with Moment.js

Advertisement

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)

About the Author

Denis works as a freelance web designer since 2005.

Homepage

Comments and Discussions
  • Clumsy Hamster, 01 February 2013

    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.

  • Seth, 01 February 2013

    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

  • Shoutheasken1961, 02 February 2013

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

  • Geert-Jan Brits, 05 February 2013

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

  • gia may phat dien, 20 February 2013

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

  • venkat, 06 September 2013

    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…..

search form
 
image description image description