142

How do I show the current time in the format HH:MM:SS?

4

14 Answers 14

175

You can use native function Date.toLocaleTimeString():

var d = new Date();
var n = d.toLocaleTimeString();

This will display e.g.:

"11:33:01"

MDN: Date toLocaleTimeString

var d = new Date();
var n = d.toLocaleTimeString();
alert("The time is: \n"+n);

7
  • 7
    i think, this should be the accepted answer, cause it answers exactly the question, uses native function and is the shortest working code to get what is asked for.
    – Christoph
    Commented Dec 13, 2016 at 2:04
  • 29
    3:59:45 PM is what it gave me. That is not the requested format.
    – Ivan
    Commented Jun 7, 2017 at 15:02
  • 3
    in one line new Date().toLocaleTimeString()
    – aljgom
    Commented Sep 22, 2020 at 1:43
  • 9
    This totally depends on the system / browser settings. Sometimes you get "22:11:33 "sometimes "10:11:33 PM" Commented Mar 20, 2021 at 13:33
  • 1
    Actually use (new Date()).toLocaleTimeString('eo', { hour12: false }) Commented Dec 25, 2023 at 5:34
135

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  // add a zero in front of numbers<10
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
  t = setTimeout(function() {
    startTime()
  }, 500);
}
startTime();
<div id="time"></div>

DEMO using javaScript only

Update

Updated Demo

(function () {
    function checkTime(i) {
        return (i < 10) ? "0" + i : i;
    }

    function startTime() {
        var today = new Date(),
            h = checkTime(today.getHours()),
            m = checkTime(today.getMinutes()),
            s = checkTime(today.getSeconds());
        document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
        t = setTimeout(function () {
            startTime()
        }, 500);
    }
    startTime();
})();
82

You can do this in Javascript.

var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

At present it returns 15:5:18. Note that if any of the values are less than 10, they will display using only one digit, not two.

Check this in JSFiddle

Updates:
For prefixed 0's try

var time = new Date();
console.log(
    ("0" + time.getHours()).slice(-2)   + ":" + 
    ("0" + time.getMinutes()).slice(-2) + ":" + 
    ("0" + time.getSeconds()).slice(-2));
4
  • yes But I need to add three column as written in question .Please read sir question .I need add time on first column and real time data on second column Commented Aug 14, 2013 at 10:34
  • You need to account for minutes and seconds < 10, as Tushar has done in his answer, or else it won't show a leading "0".
    – keepitreal
    Commented Dec 29, 2013 at 0:54
  • @CleverGirl I was trying to give simple answer so I wrote that. Since you mentioned about prefixed 0's I would like to do this with @user113716 's answer which has be portrayed very clearly.
    – Praveen
    Commented Dec 30, 2013 at 3:59
  • 1
    Also for prefixed 0's try String(date.getMinutes()).padStart(2, "0"); this will add a 0 if not 2 digits.
    – user8094363
    Commented Jul 10, 2019 at 12:14
47

You can use moment.js to do this.

var now = new moment();
console.log(now.format("HH:mm:ss"));

Outputs:

16:30:03
4
  • 4
    Thank you remus. I will never again fall down the inglorious rabbit hole of js datetime manipulations.
    – matlembo
    Commented Jul 29, 2015 at 20:42
  • Thanks man! Every one else makes everything so complicated! This is the most succinct response for someone who needs to grab a quick line of code for a simple thing! Commented Sep 10, 2015 at 23:51
  • 9
    Hide the 120-odd bytes it takes to do this by including a 20k+ script! genius
    – frumbert
    Commented Feb 2, 2017 at 5:34
  • 1
    Hey, I'm not saying you should always use it, but if you are already, why not do it the easy way 😉 Commented Feb 2, 2017 at 6:23
37
new Date().toTimeString().slice(0,8)

Note that toLocaleTimeString() might return something like 9:00:00 AM.

1
  • 2
    This is the first time I've seen someone make a code example instantiating date without new Date()... is that normal to use (new Date) ?
    – OG Sean
    Commented Nov 29, 2017 at 6:31
21

Use this way:

var d = new Date();
localtime = d.toLocaleTimeString('en-US', { hour12: false });

Result: 18:56:31

5

function realtime() {
  
  let time = moment().format('h:mm:ss a');
  document.getElementById('time').innerHTML = time;
  
  setInterval(() => {
    time = moment().format('h:mm:ss a');
    document.getElementById('time').innerHTML = time;
  }, 1000)
}

realtime();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

<div id="time"></div>

A very simple way using moment.js and setInterval.

setInterval(() => {
  moment().format('h:mm:ss a');
}, 1000)

Sample output

Using setInterval() set to 1000ms or 1 second, the output will refresh every 1 second.

3:25:50 pm

This is how I use this method on one of my side projects.

setInterval(() => {
  this.time = this.shared.time;
}, 1000)

Maybe you're wondering if using setInterval() would cause some performance issues.

Is setInterval CPU intensive?

I don't think setInterval is inherently going to cause you significant performance problems. I suspect the reputation may come from an earlier era, when CPUs were less powerful. ... - lonesomeday

No, setInterval is not CPU intensive in and of itself. If you have a lot of intervals running on very short cycles (or a very complex operation running on a moderately long interval), then that can easily become CPU intensive, depending upon exactly what your intervals are doing and how frequently they are doing it. ... - aroth

But in general, using setInterval really like a lot on your site may slow down things. 20 simultaneously running intervals with more or less heavy work will affect the show. And then again.. you really can mess up any part I guess that is not a problem of setInterval. ... - jAndy

5

Compact clock function:

setInterval(function() {
    let d = new Date()
    console.log(`${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`)
}, 1000);

4
new Date().toLocaleTimeString('it-IT')

The it-IT locale happens to pad the hour if needed and omits PM or AM 01:33:01

2
  • 1
    What does this code only answer offer over the existing solutions that show how to use .toLocaleTimeString()? Commented Aug 6, 2020 at 3:23
  • the 'it-IT' part means it outputs exactly as asked console.log(event.toLocaleTimeString('it-IT')); // expected output: 01:15:30 if you don't include 'it-IT' then you are getting something like 1:15:30 PM which misses the initial 0 and adds ` PM` which you'd have to strip away otherwise. I edited my answer to clear that up.
    – iamnotsam
    Commented Aug 6, 2020 at 13:30
2

This code will output current time in HH:MM:SS format in console, it takes into account GMT timezones.

var currentTime = Date.now()
var GMT = -(new Date()).getTimezoneOffset()/60;
var totalSeconds = Math.floor(currentTime/1000);
seconds = ('0' + totalSeconds % 60).slice(-2);
var totalMinutes = Math.floor(totalSeconds/60);
minutes = ('0' + totalMinutes % 60).slice(-2);
var totalHours = Math.floor(totalMinutes/60);
hours = ('0' + (totalHours+GMT) % 24).slice(-2);
var timeDisplay = hours + ":" + minutes + ":" + seconds;
console.log(timeDisplay);
//Output is: 11:16:55
0

This is an example of how to set time in a div(only_time) using javascript.

function date_time() {
    var date = new Date();
    var am_pm = "AM";
    var hour = date.getHours();
    if(hour>=12){
        am_pm = "PM";
    }
    if (hour == 0) {
        hour = 12;
    }
    if(hour>12){
        hour = hour - 12;
    }
    if(hour<10){
        hour = "0"+hour;
    }

    var minute = date.getMinutes();
    if (minute<10){
        minute = "0"+minute;
    }
    var sec = date.getSeconds();
    if(sec<10){
        sec = "0"+sec;
    }

    document.getElementById("time").innerHTML =  hour+":"+minute+":"+sec+" "+am_pm;
}
setInterval(date_time,500);
<per>
<div class="date" id="time"></div>
</per>
1
  • While this code block may answer the question, it would be best if you could provide a little explanation for why it does so.
    – Peter
    Commented Feb 23, 2018 at 20:50
0
new Date().toLocaleTimeString()
0

function realtime() {
  
  let time = moment().format('hh:mm:ss.SS a').replace("m", "");
  document.getElementById('time').innerHTML = time;
  
  setInterval(() => {
    time = moment().format('hh:mm:ss.SS A');
    document.getElementById('time').innerHTML = time;
  }, 0)
}

realtime();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

<div id="time"></div>

1
  • Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.
    – Tyler2P
    Commented Jan 7, 2021 at 18:19
-1

Use

Date.toLocaleTimeString()

// Depending on timezone, your results will vary
const event = new Date('August 19, 1975 23:15:30 GMT+00:00');

console.log(event.toLocaleTimeString('en-US'));
// expected output: 1:15:30 AM

console.log(event.toLocaleTimeString('it-IT'));
// expected output: 01:15:30

console.log(event.toLocaleTimeString('ar-EG'));
// expected output: ١٢:١٥:٣٠

Source

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.