02 Dec

Quick JavaScript Sample: Saving time with Moment.js

moment.js logo
Often, developers are tasked with working with dates and times in their JavaScript applications. Although, JavaScript does offer a few methods to make this process easier for developers; there are times when custom functions or complex loops are needed. For instance, formatting dates and times or comparing one date with another.  Adding custom logic to work with this date and time data seems excessive in the day and age where there is a large community of developers that share libraries to help others.

 

Enter Moment.js

Moment.js has a variety of methods available to assist developers in parsing, validating, manipulating and displaying date and time data. If you are working on a project that involves manipulating date and time data moment.js can help save you time and keep your codebase much more streamlined.  Moment is pretty easy to use and can be installed in a variety of ways. Click here to see the full list of installation options so that you can find one that works for your application architecture.

In the remainder of this blog post we are going to use the Moment library to create a project time management application. This application keeps track of multiple tasks in a project so that the user can distribute available time efficiently. We will use Moment’s ability to adjust time with addition and subtraction methods, date formatters to display date/time in a user friendly format, and take the total of all tasks to validate a deadline.

We will also be using Angular as our JavaScript framework and Materialize to create a simple user interface. If you are interested in learning more on UI frameworks check out our blog post on Google Material Frameworks!

Source Code

Working Project

Let’s Build a Demo App with Moment

Before you start, you’ll need to determine the way you will install moment.js. We used bower but you can chose the best method for your project by looking at the options on Moment’s setup page.

We are building an application that shows a project and its deadline. It also shows a list of tasks and the amount of time it will take to do each task. The user can adjust the amount of time for each task by expanding the details panel for that task. The application will then use Moment to total the number of hours and minutes for the tasks to determine if the user is still on track to meet their deadline.

Here’s a screenshot illustrating the demo app.

 

Screenshot of moment.js based time management app

 

 

You can view the source code for the demo application here. Let’s take a look at where moment.js is used in our time management demo application.

Here are the places where we are using Moment in our app.

Formatting
In our application we need help with formatting our original deadline. Lets look at how its done.

$scope.deadlineDate = "2017-12-25 12:30:17";
$scope.deadline = moment($scope.deadlineDate).format('DD / MM / YYYY  HH: mm a');

We are capturing the deadline date and time to a deadlineDate variable. Then we send that variable in to the moment format() method to create a more readable date for the user. We are using ‘DD’ for double digit dates, the ‘MM’ for double digit month, a four digit year with ‘YYYY’ and the ‘a’ to display a lowercase am or pm.

There are a variety of ways you can format your dates and times. For a list of all the options take a look at the formatting section in Moment’s documentation.

 

Manipulation
We can also use moment.js to add and subtract date and time values. In our demo app, we need to figure out when we’ll be done if we add up the time needed to complete all tasks to the current date and time.

 $scope.timeTillDeadline = moment().add($scope.projHrs, 'h').add($scope.projMins, 'm').format('DD / MM / YYYY  HH: mm a');

To perform this calculation, we start with an empty moment method which will store the current date and time. We then add the project hours and project minutes to the current date and time that was captured by calling moment(). You’ll need to know that to add or subtract using moment you will need to order time increments from largest to smallest. In other words, when working with hours and minutes you will first need to add hours then add minutes.

You can learn more about manipulating time in Moment’s manipulation documentation.

 

Query
Moment.js is very useful in comparing two date or time values with each other. In our demo app, we determine if there is enough time to finish the project with the time it will take to complete all of the tasks.

$scope.stillHaveTime = moment( $scope.timeTillDeadline).isBefore($scope.deadlineDate);

Here we are using Moment’s isBefore() method to check that the projected deadline is before the calculated completion time for the project. Using isBefore() will return a Boolean.

Moment gives us a variety of methods to use to compare times and dates. You can view the full list in Moment’s query documentation.

In Summary

Moment.js is a very powerful, clean, and easy to use utility library that can save you a good chunk of time when working with dates and times in your applications. Now it’s your turn! See how you can use Moment to build fun and useful applications using date and time data.

Libraries Used in the Demo

Share this

Leave a reply