Convert a Unix timestamp to time in JavaScript
Categories:
Converting Unix Timestamps to Human-Readable Dates in JavaScript
Learn how to convert Unix timestamps (seconds or milliseconds since epoch) into formatted date and time strings using native JavaScript Date objects and various formatting techniques.
Unix timestamps are a common way to represent a point in time as a single number, typically the number of seconds or milliseconds that have elapsed since January 1, 1970, 00:00:00 UTC (the Unix epoch). While efficient for storage and computation, they are not human-readable. This article will guide you through converting these timestamps into understandable date and time formats in JavaScript.
Understanding Unix Timestamps
Before converting, it's crucial to know whether your Unix timestamp is in seconds or milliseconds. JavaScript's Date object constructor expects milliseconds. If your timestamp is in seconds, you'll need to multiply it by 1000 before passing it to the Date constructor.
function isTimestampInSeconds(timestamp) {
// A common heuristic: if the timestamp is less than ~3,153,600,000 (roughly year 2070 in seconds),
// and its length is shorter than typical millisecond timestamps,
// it's likely in seconds.
// This is a heuristic, not foolproof.
return timestamp.toString().length === 10;
}
const timestampSeconds = 1678886400; // March 15, 2023 12:00:00 PM UTC
const timestampMilliseconds = 1678886400000; // Same date in milliseconds
console.log(`Is ${timestampSeconds} in seconds? ${isTimestampInSeconds(timestampSeconds)}`);
console.log(`Is ${timestampMilliseconds} in seconds? ${isTimestampInSeconds(timestampMilliseconds)}`);
A heuristic function to guess if a timestamp is in seconds based on its length.
Basic Conversion with Date Object
The simplest way to convert a Unix timestamp is to create a new Date object, ensuring the timestamp is in milliseconds. Once you have a Date object, you can use its various methods to extract components like year, month, day, hour, minute, and second.
const unixTimestampInSeconds = 1678886400; // March 15, 2023 12:00:00 PM UTC
// Convert to milliseconds
const unixTimestampInMilliseconds = unixTimestampInSeconds * 1000;
// Create a new Date object
const date = new Date(unixTimestampInMilliseconds);
console.log(date.toString()); // E.g., "Wed Mar 15 2023 12:00:00 GMT+0000 (Coordinated Universal Time)"
console.log(date.toUTCString()); // E.g., "Wed, 15 Mar 2023 12:00:00 GMT"
console.log(date.toISOString()); // E.g., "2023-03-15T12:00:00.000Z"
Converting a Unix timestamp to a Date object and displaying basic string representations.
new Date() when it expects milliseconds will result in an incorrect date, often in the early 1970s.Formatting Dates for Display
While toString(), toUTCString(), and toISOString() provide useful representations, you often need more specific formats. JavaScript offers powerful methods for locale-sensitive date formatting:
toLocaleString(): Formats the date according to the user's locale.toLocaleDateString(): Formats only the date part.toLocaleTimeString(): Formats only the time part.
These methods accept locales and options arguments to customize the output significantly.
const unixTimestamp = 1678886400000; // March 15, 2023 12:00:00 PM UTC
const date = new Date(unixTimestamp);
// Example 1: Full date and time for a specific locale
const formattedDate1 = date.toLocaleString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
timeZoneName: 'short',
});
console.log(`US Format: ${formattedDate1}`); // E.g., "March 15, 2023 at 12:00:00 PM UTC"
// Example 2: Date only for German locale
const formattedDate2 = date.toLocaleDateString('de-DE', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
});
console.log(`German Date: ${formattedDate2}`); // E.g., "Mittwoch, 15. März 2023"
// Example 3: Time only for Japanese locale
const formattedDate3 = date.toLocaleTimeString('ja-JP', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
});
console.log(`Japanese Time: ${formattedDate3}`); // E.g., "12:00:00"
// Example 4: Custom format for a specific timezone
const formattedDate4 = date.toLocaleString('en-GB', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
timeZone: 'America/New_York',
});
console.log(`London Time (NYC Zone): ${formattedDate4}`); // E.g., "15/03/2023, 08:00 (if UTC 12:00 is 08:00 in NYC)
// Example 5: Using UTC time components directly
const utcYear = date.getUTCFullYear();
const utcMonth = (date.getUTCMonth() + 1).toString().padStart(2, '0'); // Months are 0-indexed
const utcDay = date.getUTCDate().toString().padStart(2, '0');
const utcHours = date.getUTCHours().toString().padStart(2, '0');
const utcMinutes = date.getUTCMinutes().toString().padStart(2, '0');
console.log(`Manual UTC Format: ${utcYear}-${utcMonth}-${utcDay} ${utcHours}:${utcMinutes} UTC`);
Using toLocaleString() and related methods for flexible date and time formatting, including timezone considerations.
locales and options arguments when using toLocaleString() and similar methods. For server-side rendering or API responses, it's often best to convert to UTC first using toUTCString() or toISOString().
Flowchart of Unix timestamp conversion and formatting.