Working with Dates and Times using Moment.js

June 28, 2020 • Javascript, Libraries • Published By Josh • 4 minute read

Working with dates and times in any programming language can be difficult, especially when you want to perform calculations. Using a library called Moment.js, you will learn how simple it can be to parse, manipulate, and display Javascript dates and times!

Installation
Working with Dates and Times
Formatting Dates and Times
Adding and Subtracting Dates and Times
Answering Questions about Dates and Times

Installation

Moment.js can be installed using your favorite package manager like npm or yarn. The minimized javascript file can also be downloaded from their website and included in your project.

npm install moment --save
yarn add moment

Working with Dates and Times

It all starts with the moment object. The variable called now below is an object representing the current date and time. But what if you need to work with an existing date and time?

var now = moment();

You can pass in a string that represents a date and time. Because of browser inconsistencies with parsing strings, it’s best to tell Moment the format it’s in, especially if it’s not a known format like ISO 8601.

var startDateTime = moment('2020-06-28 09:00', 'YYYY-MM-DD hh:mm');

Formatting Dates and Times

Speaking of formats, it’s very easy to format a date and time. You pass in a string that represents the output you’d like. There are numerous formats to choose from.

// 6/28/2020
var today = moment().format('M/D/YYYY');

// Sunday, June 28th 2020, 3:40 pm
var now = moment().format('dddd, MMMM Do YYYY, h:mm a');

You can even use relative time.

// a year ago
var date = moment('2019-06-28').fromNow();

If you don’t provide a specific format, it will use the default ISO 8601 format.

// 2020-06-28T15:38:19-04:00
var now = moment().format();

Adding and Subtracting Dates and Times

Once you create a moment object, you may want to manipulate its value. You can use the add and subtract methods and pass in the amount and duration.

// Add 7 days and 1 month to the current date and time
var date = moment().add(7, 'days').add(1, 'months');

// Add 1 year to the current date and time
var date = moment().add(1, 'years');

// Subtract 24 hours from the current date and time
var date = moment().subtract(24, 'hours');

You can also pass in an object.

// Add 7 days and 1 month to the current date and time.
var date = moment().add({ days: 7, months: 1 });

Any time you manipulate the value you are changing the original moment object. If you want to avoid that scenario, make a clone of the object.

// today would actually be tomorrow because you manipulated its value.
var today = moment();
today.add(1, 'days');

// today would still be today because you created a clone of it.
var today = moment();
var tomorrow = today.clone().add(1, 'days');

Answering Questions about Dates and Times

Would you like to know if one date before or after another? How about if the date is between two other dates? There are helpful methods to help you answer these types of questions.

Using the isBefore and isAfter methods, you can check if a date and time is before or after another date and time. You can also get more specific and pass in a unit of time as the second argument to check against.

// true
moment('2020-06-28').isBefore('2020-06-29');

// false
moment('2020-06-28').isAfter('2020-06-29');

// false
moment('2020-06-28').isBefore('2020-06-29', 'year');

Using the isBetween method, you can check if a date and time is between two other dates and times. Again, you can also get more specific and pass in a unit of time as the second argument to check against.

// true
moment('2020-06-28').isBetween('2020-06-27', '2020-06-29');

// false
moment('2020-06-28').isBetween('2020-06-27', '2020-06-29', 'year');

Be aware that the order of the arguments are important. The smaller of the two dates must be listed first. Notice in the example below, the smaller date was listed second, which resulted in a false result.

// false
moment('2020-06-28').isBetween('2020-06-29', '2020-06-27');

The min and max methods can help understand which dates are the smallest or largest.

var date1 = moment('2020-06-27');
var date2 = moment('2020-06-29');

// 2020-06-27
moment.min(date1, date2).format('YYYY-MM-DD');

// 2020-06-29
moment.max(date1, date2).format('YYYY-MM-DD');