Get the Current Time Using JavaScript – With Custom Application

Many applications need to get the current time, and luckily it is not so hard using JavaScript. In order to get the time we will we working with the Date class. This class has multiple methods that we can use to get what we want in the format that we want it.

In this post we will go over how to get the current time, and at the end of the post we will build a custom application using this technique.

Steps to get the current time with JS

There are a few steps to get the current time.

1. Start with creating an instance of the date object

var date = new Date();

Now that we have our date object we get access to all the properties and methods that have been provided to us for free. We will be using the .toLocaleTimeString() method to get the current time.

2. Get the current time using .toLocaleTimeString()

var date = new Date();
var currentTime = date.toLocaleTimeString();
console.log(currentTime); // At this time prints 6:17:29 PM

the toLocaleTimeString() function will return the time portion of your date object, and is a nice way of extracting the time. You can also pass codes to specify the location that you want the local time format for. For example, you could use it to display the time both in American and European style.

Custom application working with current time

We will now build a little application to show how we can use this technique to get the current time in JavaScript in a real life scenario.

Many applications need to have some soft of time stamp. For example, if you want to show the time something finished loading or the last time something was updated. You might also want some text around the time so that it makes a bit more meaning. In this application we are going to start with creating a function that returns a string with the time for us. We will use this function so that we can easily just call a js function to get the current time with a message.

function getTimestamp(message){
    var date = new Date();
    var time = date.toLocaleTimeString();
    return message + " " + time;
}

We now have a function we can call to easily get the current time as well as a pre-pended message. We could of course make this method anyways we wanted, and you can modify it based on what your needs are.

Now we need a button that when we click it we will update a label with what the getTimeStamp() function returns. We also need an element that we can update. We will make this element a p element nested inside a div.

<div id="timestamp"> <p> Text we want to update <P> </div>

And now for our method that will update the paragraph element.

var timeStampDiv = document.getElementById("timestamp");

timeStampDiv.addEventListener("click", function(){
    var message = getTimestamp("Last updated:");
    console.log(message);
    var timeStampDiv = document.getElementById("timestamp");
    timeStampDiv.innerHTML = message;
});

Working application

Below you can find the working application

Each time you click on the text inside the box it will update with the current time.

Each time you click me I will update with the current time

You should be able to simply click the text above and it should update with a message and the time at which it was updated. If it does not work make sure you are not blocking JavaScript in your browser.

So there you have it. We now have a functioning mini application where we are using JavaScript to get the current time and display it on the page.

Last Updated: by Ole Larsen