Categories
JavaScript Answers

How to Transform Moment.js Objects to JavaScript Date Objects or Strings?

Spread the love

Moment.js is a useful library that lets us manipulate dates easily.

However, on many occasions, we’ve to convert moment objects back to native JavaScript date objects to let us do things we want.

In this article, we’ll look at how to transform moment.js objects to JavaScript date objects or strings.

The toDate Method

The toDate method that comes with moment objects lets us convert moment objects to native JavaScript date objects.

For instance, we can write:

console.log(moment().toDate());

to convert the moment object that stores the current date-time back to a native JavaScript date object.

And we should get something like:

Fri Feb 19 2021 17:08:49 GMT-0800 (Pacific Standard Time)

from the console log.

Output to a String

We can use the format method to return a formatted date string from the moment object.

For example, we can write:

console.log(moment().format("YYYY-MM-DD HH:mm:ss"));

YYYY is the formatting code for a 4 digit year.

MM is the formatting code for a 2 digit month.

DD is the formatting code for a 2 digit date.

HH is the formatting code for a 2 digit hour.

mm is the formatting code for 2 digit minutes.

ss is the formatting code for 2 digit seconds.

And so, we should get something like:

2021-02-19 17:10:17

from the console log.

Convert Time to its Equivalent in a Given Timezone

We can convert a moment object with a given time to its equivalent in a given time zone.

First, we include the libraries by writing:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone.min.js" integrity="sha512-jkvef+BAlqJubZdUhcyvaE84uD9XOoLR3e5GGX7YW7y8ywt0rwcGmTQHoxSMRzrJA3+Jh2T8Uy6f8TLU3WQhpQ==" crossorigin="anonymous"></script>

The first script tag is for moment.js.

And the 2nd script tag is for moment-timezone.

The 2nd script tag will add the tz method to moment objects to let us convert a time to its equivalent in a different time zone.

For instance, we can write:

moment.tz.add([
  'America/Los_Angeles|PST PDT|80 70|0101|1Lzm0 1zb0 Op0',
  'America/New_York|EST EDT|50 40|0101|1Lz50 1zb0 Op0'
]);
console.log(moment().tz("America/New_York").format("YYYY-MM-DD HH:mm:ss"));

We call moment.tz.add to add the time zone data.

Then we can use that data to do the conversion with the tz method as it’s done in the console log.

tz returns a moment object with the converted time, so we can call format on it to return a formatted date string.

To convert a moment object to its equivalent in UTC, we can use the utc method:

console.log(moment().utc().format("YYYY-MM-DD HH:mm:ss"));

The utc method is built into the core moment.js library, so we don’t need the moment-timezone library to use it.

Conclusion

We can convert moment objects to date objects or strings with various handy methods provided by the moment.js and moment-timezone libraries.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *