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?
In this tutorial, I‘ll discuss working with
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
In the browser,
moment is dowloaded here and included in a script tag like this:
Manipulating date and time
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
What if in our use-case, it’s more intuitive to show the user a relative date? With moment, you can simply do this:
moment() without any parameters returns the current date in your timezone.
Let’s go in-depth with more formatting approaches that Moment offers.
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
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
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.
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.
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
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
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.
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
Other query methods used in comparing two date values include:
These methods all follow the same syntax and return
false. There are also methods which verify the validity of a certain date. These are:
isDST() verifies if the
moment is in Daylight Saving Time or not.
isLeapYear() method verifies if a year is a leap year and returns a boolean.
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.