How to show current time in JavaScript in the format HH:MM:SS?

Question

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

But the problem is that it is having PM and AP I don't need that .Secondly 24 format — user2648752, Aug 14 '13 at 10:24
@user2648752 check my answer demo http://jsfiddle.net/cse_tushar/fKKSb/ — Tushar Gupta - curioustushar, Aug 14 '13 at 10:25
Um ... Why is the question tagged [tag:date], even though the user is asking for the time? — Lloyd Dominic, May 22 '17 at 09:50

score 168 · Answer 1 · edited Mar 31 '21 at 15:08

168

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);

edited Mar 31 '21 at 15:08

Roko C. Buljan

196,159
39
305
313

answered Sep 16 '16 at 09:34

pstryk

1,991
1
14
11

6

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 Lösch Dec 13 '16 at 02:04
28

3:59:45 PM is what it gave me. That is not the requested format. – Ivan Jun 07 '17 at 15:02
toLocaleTimeString is not a function – User Feb 03 '19 at 18:22
2

in one line `new Date().toLocaleTimeString()` – aljgom Sep 22 '20 at 01:43
8

This totally depends on the system / browser settings. Sometimes you get "22:11:33 "sometimes "10:11:33 PM" – Kavindu Pasan Kavithilaka Mar 20 '21 at 13:33

score 134 · Accepted Answer · edited Feb 20 '17 at 10:46

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();
})();

score 82 · Answer 3 · edited Mar 11 '16 at 11:28

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));

edited Mar 11 '16 at 11:28

mwfearnley

3,303
2
34
35

answered Aug 14 '13 at 10:22

Praveen

55,303
33
133
164

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 – user2648752 Aug 14 '13 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 Dec 29 '13 at 00: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](http://stackoverflow.com/a/3605248/1671639) which has be portrayed very clearly. – Praveen Dec 30 '13 at 03:59
1

Also for prefixed 0's try `String(date.getMinutes()).padStart(2, "0");` this will add a 0 if not 2 digits. – Jul 10 '19 at 12:14

score 46 · Answer 4 · answered Jan 18 '14 at 00:30

46

You can use moment.js to do this.

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

Outputs:

16:30:03

answered Jan 18 '14 at 00:30

brandonscript

68,675
32
163
220

4

Thank you remus. I will never again fall down the inglorious rabbit hole of js datetime manipulations. – matlembo Jul 29 '15 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! – ChairmanMeow Sep 10 '15 at 23:51
9

Hide the 120-odd bytes it takes to do this by including a 20k+ script! genius – frumbert Feb 02 '17 at 05:34
1

Hey, I'm not saying you should always use it, but if you are already, why not do it the easy way – brandonscript Feb 02 '17 at 06:23

score 37 · Answer 5 · edited Mar 22 '19 at 18:36

37

new Date().toTimeString().slice(0,8)

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

edited Mar 22 '19 at 18:36

mrts

16,697
8
89
72

answered Jan 23 '17 at 18:22

Thorsten

371
3
3

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 Nov 29 '17 at 06:31

score 20 · Answer 6 · edited Dec 11 '19 at 16:34

20

Use this way:

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

Result: 18:56:31

edited Dec 11 '19 at 16:34

Martin Paucot

1,191
14
30

answered Dec 11 '19 at 15:54

Thomas

201
2
3

flyingpluto7 · Answer 7 · 2018-08-19T10:14:47.663

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

score 5 · Answer 8 · edited Feb 05 '22 at 13:48

5

Compact clock function:

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

edited Feb 05 '22 at 13:48

aljgom

7,879
3
33
28

answered Jun 07 '21 at 10:37

ByCodeXp

131
1
2
6

iamnotsam · Answer 9 · 2020-08-12T20:05:09.910

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

edited Aug 12 '20 at 20:05

answered Aug 06 '20 at 00:15

iamnotsam

9,470
7
33
30

1

What does this code only answer offer over the existing solutions that show how to use `.toLocaleTimeString()`? – Jason Aller Aug 06 '20 at 03: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 Aug 06 '20 at 13:30

score 2 · Answer 10 · answered Mar 28 '18 at 10:31

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

score 0 · Answer 11 · edited Mar 10 '19 at 07:40

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>

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, Feb 23 '18 at 20:50

score 0 · Answer 12 · answered Sep 15 '20 at 10:59

0

new Date().toLocaleTimeString()

answered Sep 15 '20 at 10:59

Dilushan

143
1
10

score 0 · Answer 13 · answered Jan 07 '21 at 17:15

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>

answered Jan 07 '21 at 17:15

venetzia gajardo

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 Jan 07 '21 at 18:19

score -1 · Answer 14 · answered Apr 28 '22 at 04:43

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

How to show current time in JavaScript in the format HH:MM:SS?

14 Answers14

Linked

Related