All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Get Current Time In 24 Hour Format

Last Updated : Mar 11, 2024

JavaScript Get Current Time In 24 Hour Format

In this tutorial we will show you the solution of JavaScript get current time in 24 hour format, here we defined date object and using toLocaleString('en-GB') method with parameter we gets current time in 24hrs format.

For collecting 24hours format we used British country code ‘en-GB’ and toLocaleString() method used to get current date and time then using slice we removed date from string time only displayed as result.

Step By Step Guide On JavaScript Get Current Time In 24 Hour Format :-

Here we defined h3 tag with concept heading and div tag defined with id ‘res’ for appends time result on webpage.

In script we defining date object ‘t’ with that we collecting british country current date and time by toLocalString(‘en-GB’) method and date, time string stored on variable ‘re’.

Using slice() method we removing date part from string by value ’12-refers length of letters’ and result updated on variable ‘re’.

Finally we appended result string on div element ‘res’ by innerHTML.

<!DOCTYPE html>
<html>
    <head>
        <title>TIME IN 24hrs</title>
    </head>
    <body>
        <h3>TIME IN 24HRS FORMAT</h3>
        <div id="res"></div>
        <script>
            var t=new Date();
            var re=t.toLocaleString('en-GB');
            re=re.slice(12);
            document.getElementById('res').innerHTML=re;
        </script>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. In html we defined h3 tag with concept heading and div tag defined id ‘res’ for appends result on webpage.
  7. In <script> we defined date object its referred by variable ‘t’ then for collecting current date time we used ‘t’ with ‘toLocaleString(‘en-GB’)’ method so result of british country date time format stored on variable ‘re’.
  8. We need only time part so we removed date part from that string using slice method and updated result stored on same variable ‘re’ finally we appended result on div element ‘res’.
  9. Both </body>, </html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to get current time in 24hr format using javascript.

When we executing this program on browser we can see result of 24 hours format current time will displayed on webpage with heading ‘TIME IN 24HRS FORMAT’.

We can also get current or specified date and time in different formats by using other countries code in toLocaleString() method so try all country codes for your clarification because later we have to use them at somewhere.

I hope this tutorial on JavaScript get current time in 24 hour format helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪