Manipulate date and time in JavaScript using MomentJS

It’s almost 2018! We use dates and time every day of our lives, I just did, and if you are a developer designing a product, tool, or service, you most likely would need to manipulate date in whatever you are building.

How do you work with dates in your script? new Date()? Manipulating like that can be, at best, cumbersome. Moment is a JavaScript library that, with its approachable API methods, makes working with dates a lot easier.

In this tutorial, I‘ll discuss working with moment to effectively manipulate date and time in JavaScript.


Moment can be run on both the browser as well as on the server-side. Using Node.js on the server-side, moment is installed via npm by running this on the command line:

npm install -g moment

moment can then simply be required:

We just created the moment object, which can be manipulated to return any desired date value. Once the moment function is called with moment() it defaults to the current date, just like new Date().

In the browser, moment is dowloaded here and included in a script tag like this:

Alternatively, it can be imported from a CDN and used as a source in script tags. Other installation methods can be found here.

Manipulating date and time

The moment object gives us the ability to manipulate the date object however we choose, applying several (chaining) moment methods to it returns desired formatted date values.

For example, we get the following format with new Date():

What if in our use-case, it’s more intuitive to show the user a relative date? With moment, you can simply do this:

Calling moment() without any parameters returns the current date in your timezone.

Let’s go in-depth with more formatting approaches that Moment offers.

Date formatting

Previously, formatting dates with the Date() string involved performing several string operations on the returned date string. With moment we just need to add the format() method to format the date. This method also receives parameters defining how we would like the date to appear.

To get a particular moment as a string, pass the string value as a parameter when calling moment().

The format of the date specified can also be passed in as a parameter if known. The date is treated as invalid if its values cannot be parsed.

Others date formats can be found here.

moment uses method chaining to do awesome manipulations when a moment is called, for instance:

This is just an illustration of chaining methods in moment. Also note that moments are mutable and therefore change the original fetched moment. To create a new manipulated moment, the original moment can be cloned into a new variable.


This method subtracts time from the original moment. Here, the subtract() method is called and passed parameters of a number denoting the amount of time to be removed and the time value. This time value can also be written in shorthand, they include:

  • d: Days
  • y: Years
  • Q: Quarters
  • M: Months
  • w: Weeks
  • h: Hours
  • m: Minutes
  • s: Seconds
  • Ms: Milliseconds

Multiple combinations can also be done with the subtract time method by chaining.


This is similar to the subtract() method and only adds a desired amount of time to the moment.

Start of

This method mutates the moment to the start of a specified time. This sets the time to the beginning of the current time, either to the beginning of the day, month, year, or minute.

End of

This is the opposite of startOf() and mutates the moment to the end of a unit of time. This includes the week, month, day, or year.

Time from now

This displays relative time is used to give a whole picture of the difference between two timeframes.

The fromNow() method also takes a boolean, passing in true removes the ‘ago’ suffix.

To view the exact time from a particular date, the from() method is used.

Time to now

Similar to fromNow(), the toNow() method returns the opposite of the fromNow() method. The to() method is also used to show relative time between two time values.


This is one of the common problems encountered when manipulating time and date. With moment, the diff() method is used to calculate the difference between two moments and it returns the difference in milliseconds. However, other units of time such as years, months, weeks, days, hours, minutes, and seconds can be returned. The diff() method takes in a unit of time as a first parameter and can take the desired time unit as a second parameter.


These are moment methods that return boolean values and is used to compare two date values.


As its name implies, the isBefore() method verifies if one date value is before another date value.


Similar to the isBefore() method, this method verifies if a date after is after another date value and returns either true or false.

Other query methods used in comparing two date values include:

  • isSame()
  • isBetween()
  • isSameOrAfter()
  • isSameOrBefore()

These methods all follow the same syntax and return true or false. There are also methods which verify the validity of a certain date. These are:


The isDST() verifies if the moment is in Daylight Saving Time or not.


The isLeapYear() method verifies if a year is a leap year and returns a boolean.


With the isValid() method, the validity of a moment can be ascertained.


In this article, we have seen how moment make date and time handling and management seamless. By simply applying methods on the moment object either singularly or in chains we can effectively manipulate our date and time to achieve desired results.

Find additional resources here on the official moment.js documentation.

Want to read more articles like this? Join our weekly mailing list to learn about new tools, libraries, and best practices that will help you build better apps:

LogRocket helps product teams build better experiences for their users. By recording videos of user sessions along with logs and network data, LogRocket surfaces UX problems and reveals the root cause of every bug.