When you use Twitter or other APIs, you might come across timestamps in JSON data represented as UNIX time (created_at). This article explains how to display these UNIX times as human-readable formatted dates using JavaScript.
What is UNIX Time?
UNIX time, also known as Epoch time, is the number of seconds that have elapsed since January 1, 1970, 00:00:00 UTC. It is a common way of representing time in many programming languages and systems. UNIX time is an integer, providing a unique representation of a specific moment.
Converting UNIX Time to Date Format in JavaScript
JavaScript has a built-in Date object for handling dates and times. Using this object, you can convert UNIX time to a regular date and time.
Here’s how you can format UNIX time into a readable date.
JavaScript Code to Format a Timestamp into a Specified Date
First, you need to load the jquery.min.js (1.8 series) file. Use the unixdateformat() function to format the timestamp into a specified date. The ready() function is used to convert UNIX time into a timestamp after the page has loaded, and then unixdateformat() is used to convert it into a readable date.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
// Format timestamp into specified date
function unixdateformat(str){
var objDate = new Date(str);
var nowDate = new Date();
// Difference from the current time
myHour = Math.floor((nowDate.getTime()-objDate.getTime()) / (1000*60*60)) + 1;
var year = objDate.getFullYear();
var month = objDate.getMonth() + 1;
var date = objDate.getDate();
var hours = objDate.getHours();
var minutes = objDate.getMinutes();
var seconds = objDate.getSeconds();
if ( hours < 10 ) { hours = "0" + hours; }
if ( minutes < 10 ) { minutes = "0" + minutes; }
if ( seconds < 10 ) { seconds = "0" + seconds; }
str = year + '/' + month + '/' + date + ' ' + hours + ':' + minutes + ':' + seconds;
var rtnValue = str;
return rtnValue;
}
$(document).ready(function(){
// Convert UNIX time to timestamp
var date = new Date( 1369720268 * 1000 );
// Output formatted date
$("#idDate").html(unixdateformat(date));
});
</script>
HTML Code for Displaying the Formatted Date from UNIX Time
This code outputs the formatted date into an HTML element. The formatted date is displayed in a div element with the id attribute “idDate”.
<div id="idDate"></div>
Demo Page to Display Formatted Date from UNIX Time Using JavaScript
You can check out the demo page that displays the formatted date from UNIX time using JavaScript from the link below.
Demo Page to Display Formatted Date from UNIX Time Using JavaScript
Comparison with PHP
Many web developers commonly use the PHP date function for date conversion. However, JavaScript is very useful for displaying and manipulating dates on the client side.
In JavaScript, the Date object allows you to easily handle and convert dates. Using the method described in this article, you can convert UNIX time obtained from an API into a readable format for display and manipulation on a web page.
Conclusion
UNIX time is a widely used method of representing time in many APIs and databases. This article has detailed how to convert UNIX time into a human-readable date using JavaScript. This makes it easier to display and manipulate dates on a web page.
Converting dates using JavaScript is an important step in improving the user experience of web applications and websites. By incorporating this technique, you can create more user-friendly and interactive web content.
※ Please use this information at your own risk.
Do not copy the Google Analytics tags within the demo page tag.
