← coderrocketfuel.com

Convert Milliseconds to a Date in Vanilla JavaScript

How do you convert a milliseconds value into a human-readable date using vanilla JavaScript?

You can do this using the two easy steps:

  1. Create a date object with the new Date() constructor method.
  2. Use the .toLocaleString() function to convert the date object into human-friendly date strings.

In this article, we'll walk you through each of those steps.

Let's get started!

Table of Contents

Step 1 - Create a Date Object Using new Date()

The first step is to create a new Date() object using your milliseconds value.

The Date object instance we create will represent a single moment in time and will hold data on the year, month, day, hour, minute, and second for that moment in time.

To create the Date object, make your code look like this:

const milliseconds = 1575909015000

const dateObject = new Date(milliseconds)

We use the new Date() constructor and pass to it the millseconds value.

As a result, we're left with a newly created dateObject variable that represents the Date object instance. We'll use this to create human-readable date strings in the next section.

Step 2 - Create Human-Friendly Date Strings With .toLocaleString()

Now that we have a Date object to work with, we can start creating some human-friendly date strings.

Using the .toLocaleString() function is one really easy way to do this. The function can be called on a Date object and will return a string with a language sensitive representation of the date portion of the given dateObject object.

Here's what a simple code example looks like (adding on to the code we have written in the past section):

const milliseconds = 1575909015000

const dateObject = new Date(milliseconds)

const humanDateFormat = dateObject.toLocaleString() //2019-12-9 10:30:15

As you can see, we created a human-friendly date string by calling the .toLocaleString() on the dateObject we created in the last section.

Here are some examples of how you can use the .toLocaleString() to return strings of specific components of the date by passing different arguments to the .toLocaleString() function:

const milliseconds = 1575909015000

const dateObject = new Date(milliseconds)

const humanDateFormat = dateObject.toLocaleString() //2019-12-9 10:30:15

dateObject.toLocaleString("en-US", {weekday: "long"}) // Monday
dateObject.toLocaleString("en-US", {month: "long"}) // December
dateObject.toLocaleString("en-US", {day: "numeric"}) // 9
dateObject.toLocaleString("en-US", {year: "numeric"}) // 2019
dateObject.toLocaleString("en-US", {hour: "numeric"}) // 10 AM
dateObject.toLocaleString("en-US", {minute: "numeric"}) // 30
dateObject.toLocaleString("en-US", {second: "numeric"}) // 15
dateObject.toLocaleString("en-US", {timeZoneName: "short"}) // 12/9/2019, 10:30:15 AM CST

The .toLocaleString() function takes a locales string parameter that alters results based on language and geography. In the example above, we used the "en-US" locale tag. You can learn more about other values you can use instead here.

We also passed an object with some options in it as well. If you want to learn more, there's some good information about those here.

You now know how to convert a millisecond value into a human-readable date using vanilla JavaScript!