JavaScript Display Current Time in 12 hour format AM PM and 24 hour format with Hours Minutes and Seconds hhmmss

In this article I will explain how to display Current Time in 12 hour format (AM / PM) and 24 hour format with Hours Minutes, Seconds (hh:mm:ss) using JavaScript.

The 12 hour time will be displayed in hh:mm:ss tt format with AM / PM and the 24 hour time will be displayed in hh:mm:ss format using JavaScript.

Display Current Time in 24 hour format with Hours Minutes and Seconds (hh:mm:ss) using JavaScript

The following HTML Markup consists of an HTML SPAN element which will be used for displaying the Current Time in 24 hour format with Hours Minutes and Seconds (hh:mm:ss).

The window.onload event handler executes the DisplayCurrentTime JavaScript function. Inside the DisplayCurrentTime JavaScript function, first the current date is determined using the JavaScript Date object.

Then Hours, Minutes and Seconds are calculated using the getHours, getMinutes and getSeconds function of the JavaScript Date object.

While calculating the Hours, Minutes and Seconds, if the value of Hour, Minute or Second is less than 10 then a Zero is padded in order to make the value in two digits.

window.onload = function () {

DisplayCurrentTime();

};

function DisplayCurrentTime() {

var date = new Date();

var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();

var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();

var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

time = hours + ":" + minutes + ":" + seconds;

var lblTime = document.getElementById("lblTime");

lblTime.innerHTML = time;

};

</script>

Display Current Time in 12 hour format (AM / PM) with Hours Minutes and Seconds (hh:mm:ss tt) using JavaScript

The following HTML Markup consists of an HTML SPAN element which will be used for displaying the Current Time in 12 hour format with Hours Minutes, Seconds (hh:mm:ss tt).

Then Hours, Minutes and Seconds are calculated using the getHours, getMinutes and getSeconds function of the JavaScript Date object.

JavaScript Date object returns Time in 24 hour format and hence in order to convert the Time to 12 hour format a check is performed that if the Hour value is greater than 12 then the value 12 is subtracted from it which converts it to 12 hour format.

AM / PM value is calculated by comparing the Hour value with value 12. If the value is greater than or equal to 12 then it is set as PM and if it is less than 12 then the value is set as AM.

While calculating the Hours, Minutes and Seconds, if the value of Hour, Minute or Second is less than 10 then a Zero is padded in order to make the value in two digits.

window.onload = function () {

DisplayCurrentTime();

};

function DisplayCurrentTime() {

var date = new Date();

var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();

var am_pm = date.getHours() >= 12 ? "PM" : "AM";

hours = hours < 10 ? "0" + hours : hours;

var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();

var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

time = hours + ":" + minutes + ":" + seconds + " " + am_pm;

var lblTime = document.getElementById("lblTime");