Sometimes, we’ve to convert a Unix timestamp into a more human-readable format.
In this article, we’ll take a look at how to convert a Unix timestamp to a more readable format with JavaScript.
Use the Date Constructor and its Instance Methods
We can pass the Unix timestamp in milliseconds to the Date constructor to create a Date instance.
Then we can use its instance methods to get different parts of the date and put it into a string.
For instance, we can write:
const unixTimestamp = 15493124560
const date = new Date(unixTimestamp * 1000);
const hours = date.getHours();
const minutes = "0" + date.getMinutes();
const seconds = "0" + date.getSeconds();
const formattedTime = `${hours}:${minutes.substr(-2)}:${seconds.substr(-2)}`;
console.log(formattedTime);
We have the unixTimestamp in seconds.
Then we multiply that by 1000 and pass it into the Date constructor.
Next, we call getHours to get the hours from the Date instance.
And we call getMinutes to get the minutes.
And then we call getSeconds to get the seconds.
Then we put it all together in the formattedTime string.
To get the 2 digit minutes and seconds, we call substr with -2 to get the last 2 digits of them.
This trims off any leading zeroes from the number strings.
Then should see ’5:42:40' as the result.
To get the year, month, and date, we can write:
const unixTimestamp = 1613330814
const date = new Date(unixTimestamp * 1000);
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const year = date.getFullYear();
const month = months[date.getMonth()];
const dt = date.getDate();
const hours = date.getHours();
const minutes = "0" + date.getMinutes();
const seconds = "0" + date.getSeconds();
const formattedTime = `${year}-${month}-${dt} ${hours}:${minutes.substr(-2)}:${seconds.substr(-2)}`;
console.log(formattedTime);
We have the Unix timestamp in seconds.
So we’ve to multiply it by 1000 before passing it into the Date constructor.
Then we have a months array with the months abbreviations.
getFullYear returns the 4 digit year of a Date instance.
getMonth returns the month number of the Date instance, with 0 being January, 1 being February, all the way to 11 for December.
The getDate method returns the day of the month.
The rest of the code is the same.
Then formattedDate is '2021-Feb-14 11:26:54' .
The toLocaleTimeString Method
Another way to format a date into a human-readable string is to use the toLocaleTimeString method.
It takes the locale string as its argument.
For instance, we can write:
const str = new Date(1613331041675).toLocaleTimeString("en-US")
console.log(str)
We pass in the Unix timestamp converted to milliseconds to the Date constructor.
Then we call toLocaleDateString with the 'en-US' locale.
And we should get ‘11:30:41 AM’ as a result.
The Intl.DateTimeFormat Constructor
Another way we can format dates is to use the Intl.DateTimeFormat constructor.
For instance, we can write:
const dtFormat = new Intl.DateTimeFormat('en-US', {
timeStyle: 'medium',
timeZone: 'PST'
});
const str = dtFormat.format(new Date(1613331041675));
console.log(str)
We pass in the locale as the first argument of the constructor.
And we pass in some options as the 2nd argument.
timeStyle has the formatting style of the time.
timeZone sets the timezone of the time that’s returned.
Then we call format to return a string with the time.
And we get ‘11:30:41 AM’ as a result.
Conclusion
We can format a Unix timestamp with JavaScript with our own code or we can use native methods and constructors to format our dates.
