Skip to main content

Build Timestamp Converter to Date with JavaScript

Updated on: coderszine team JavaScript, Tutorial

In our previous tutorial, we have explained Build Currency Converter in PHP. In this tutorial, we will explain how to implement functionality to convert timestamp into human readable date format using JavaScript.

Timestamp or epoch time is the point of time which occurred on certain event. In web applications, we stored date time as epoch timestamp or unix timestamp into database as it is more accurate and have more details.

The timestamp is only 10 digit number and it is not human readable. We have use epoch timestamp converter tools to convert timestamp into human readable date. We need to implement functionality to convert timestamp into human readable format and get other details related to date time.

We will also handle timestamp in milliseconds conversion to date. The tutorial explained in easy steps with live demo and also link to download source code of live demo.

timestamp converter to date

Also, read:

So let’s create example to implement functionality to convert timestamp into human readable date time format using JavaScript. The file structure of this example is following.

  • index.php
  • convert.js

Step1: Include Bootstrap, jQuery and MomentJS Files

As we have handled design using Bootstrap, so first we will include Bootstrap and jQuery library files in index.php. We will also include moment.js file because we have handled timestamp conversion to date using MomentJS.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="script/moment.js"></script>
<script type="text/javascript" src="script/convert.js"></script>

Step2: Design Timestamp Convert Form

In index.php file, we will design timestamp convert form with a input and a button. Also design HTML to display timestamp convert result in human readable format.

<div class="container">	
	<h2>Convert Timestamp to Date using JavaScript</h2>
	<div class="form-group">	
		<div class="row">		
			<div class="col-sm-6">	
				<div class="col-sm-4">	
					<label></label>						
					<input type="text" class="form-control" id="unixTimestamp">		
				</div>
				<div class="col-sm-8">
					<label></label>		
					<button type="button" id="timestampConvert" class="btn btn-primary"  title="Epoch to Human date (with support for milliseconds and microseconds)">Convert</button>	
				</div>						
				<div class="col-sm-12">
					<br />
					<span id="milisecond"></span>
					<br />
					<span id="gmt_time"></span><span id="gmt"></span>
					<br />
					<span id="local_time"></span><span id="timezone"></span>					
				</div>		
			</div>		
		</div>	
	</div>	
</div>

Step3: Implement Timestamp Conversion to Human Readable Format

Now in convert.js file, we will implement functionality to convert timestamp to date using MomentJS functions. We will set current timestamp into timestamp input box and handle timestamp convert functionality on convert button click.

$('document').ready(function() { 
	var currentTimestamp = moment().format('X'); 	
	$("#unixTimestamp").val(currentTimestamp);	
	$('#timestampConvert').on('click', function() {		 
		var timestamp= $("#unixTimestamp").val();		
		var dateUtcLocal = moment.unix(timestamp).utc().format();
		var timezoneOffset = getTimezoneOffset();
		var localDate = moment.parseZone(dateUtcLocal).utcOffset(timezoneOffset);
		var localDate =localDate.format("dddd, DD MMMM YYYY, h:mm:ss A");	
		var isMilisecond = 0;	
		if(localDate == 'Invalid date' && timestamp.length>10) {
			timestamp = timestamp / 1000;
			isMilisecond = 1;						
		}		
		var dateUtc = moment.unix(timestamp).utc().format("dddd, DD MMMM YYYY, h:mm:ss A");	
		$("#gmt_time").html("GMT: "+dateUtc);
		$("#gmt").html(" GMT");	
		var DateUtcTime = moment.unix(timestamp).utc().format();
		var localDate = moment.parseZone(DateUtcTime).utcOffset(timezoneOffset);
		var local =localDate.format("dddd, DD MMMM YYYY, h:mm:ss A");			
		if(local == 'Invalid date' ) {
			$("#milisecond").html("");
			$("#gmt_time").html("");
			$("#gmt").html("");	
			$("#local_time").html("Enter Valid Unix Timestamp!");	
			$("#timezone").html("");		
		} else {
		    if(isMilisecond == 1) {
				$("#milisecond").html("Seems you have entered timestamp in milliseconds");
			}
			$("#local_time").html("Your Local Time: "+ local);	
			$("#timezone").html("GMT "+localDate.format("Z"));	
		}
	});		
});

We will also create a function getTimezoneOffset() and used in above code to get user’s current tiemzone offset to get local timezone offset to display date time according to local timezone.

function getTimezoneOffset() {	
	var timezoneOffset = moment.parseZone(Date.now()).utcOffset() / 60;
	if(moment().isDST()) {
		var offset = [];		
		timezoneOffset = timezoneOffset.toString();				
		offset = timezoneOffset.split('.');		
		offset[0] = offset[0].toString();	
		if(offset[0] < 0 ) {
			timezoneOffset = offset[0].replace(/\d+/gi, function calOffset(n){ return ++n;});						
		} else {
			timezoneOffset = offset[0].replace(/\d+/gi, function calOffset(n){ return --n;});				
		}	
		timezoneOffset = timezoneOffset+(offset[1]?"."+offset[1]:"");
	}
	return timezoneOffset;	
}

You may also like:

You can view the live demo from the Demo link and can download the source from the Download link below.
Demo Download