Javascript UNIX timestamp converter ~ Tech Blog

I often need to convert UNIX timestamps from log files into a human readable format and need a quick and easy to access tool for doing so, and have written up this post with the converter tool followed by an explanation of the Javascript code behind it.

UNIX timestamp converter tool

The converter is automatically populated with the current UNIX timestamp using Javascript in your browser and then converted to the three formats below it. Copy and paste a new timestamp into the text field and click the "Convert" button to convert the new value.

Database format:	2015-07-11 05:27:12
Formatted as local time:	7/11/2015, 5:27:12 AM
Formatted as UTC/GMT:	Fri, 10 Jul 2015 23:57:12 GMT

How it works

The input field has an id "inputTimestamp" and the three table cells where the output is displayed have ids "outputDatabase, "outputLocal" and "outputUTC".

There is padding done on the numbers in the database format output for the month, day, hours minutes and seconds using the pad function supplied by Hans Pufel.

Clicking the convert button calls the convertTimestamp() function as shown below:

function convertTimestamp() {
 var timestampField = document.getElementById('inputTimestamp');
 var timestampValue = parseInt(timestampField.value);
 if(isNaN(timestampValue) || timestampValue != timestampField.value) {
  document.getElementById('outputDatabase').innerHTML = "Timestamp is not a number";
  document.getElementById('outputLocal').innerHTML = "Timestamp is not a number";
  document.getElementById('outputUTC').innerHTML = "Timestamp is not a number";
 }
 else {
  var dt = new Date(timestampValue*1000);
  document.getElementById('outputDatabase').innerHTML = dt.getFullYear() + '-' + pad(dt.getMonth()+1, 2) + '-' + pad(dt.getDate(), 2) + ' ' + pad(dt.getHours(), 2) + ':' + pad(dt.getMinutes(), 2) + ':' + pad(dt.getSeconds(), 2);
  document.getElementById('outputLocal').innerHTML = dt.toLocaleString();
  document.getElementById('outputUTC').innerHTML = dt.toUTCString();
 }
}

Line 2 stores a reference to the timestamp field as a variable because we'll be using it twice. Note that I'm just using regular old Javascript instead of a library like jQuery.

Line 3 then runs parseInt to get a number from the value and line 4 checks to see it is a valid number and that the parsed number is the same as the original number. This needs to be done otherwise for example parseInt will convert 131a7075506 to 131 which is a valid number, but not really valid for our purposes.

Lines 5 to 7 put an error message into the output lines in the table.

Line 10 creates a date object by multiplying the timestamp value by 1000 so it's in milliseconds - UNIX timestamps are in seconds.

The remaining lines then put the output into the table cells. I've used innerHTML because it's easy and supported by all browsers, and it appears to be in the HTML5 spec (whereas I'm not sure if it was an official part of earlier HTML versions).

The initialization code

When the page first loads it initializes the input timestamp with the current timestamp. The Javascript code for doing this is below:

document.getElementById('inputTimestamp').value = Math.floor((new Date()).getTime() / 1000);
convertTimestamp();

Calling getTime() on the date object returns the current time in milliseconds, so it needs to be divided by 1000 to get the UNIX timestamp in seconds. Math.floor is used to round it down to the nearest whole number.

Tech Blog

Monday, 10 September 2018