How do I show the current time in the format HH:MM:SS?
-
Here is my code..jsfiddle.net/naveennsit/yd99X– user2648752Commented Aug 14, 2013 at 10:23
-
1But the problem is that it is having PM and AP I don't need that .Secondly 24 format– user2648752Commented Aug 14, 2013 at 10:24
-
@user2648752 check my answer demo jsfiddle.net/cse_tushar/fKKSb– Tushar Gupta - curioustusharCommented Aug 14, 2013 at 10:25
-
1Um ... Why is the question tagged date, even though the user is asking for the time?– Lloyd DominicCommented May 22, 2017 at 9:50
14 Answers
You can use native function Date.toLocaleTimeString()
:
var d = new Date();
var n = d.toLocaleTimeString();
This will display e.g.:
"11:33:01"
var d = new Date();
var n = d.toLocaleTimeString();
alert("The time is: \n"+n);
-
7i 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. Commented Dec 13, 2016 at 2:04
-
293:59:45 PM is what it gave me. That is not the requested format.– IvanCommented Jun 7, 2017 at 15:02
-
3
-
9This 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
-
1Actually use
(new Date()).toLocaleTimeString('eo', { hour12: false })
Commented Dec 25, 2023 at 5:34
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
(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();
})();
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));
-
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". 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.– PraveenCommented Dec 30, 2013 at 3:59
-
1Also for prefixed 0's try
String(date.getMinutes()).padStart(2, "0");
this will add a 0 if not 2 digits.– user8094363Commented Jul 10, 2019 at 12:14
You can use moment.js to do this.
var now = new moment();
console.log(now.format("HH:mm:ss"));
Outputs:
16:30:03
-
4Thank you remus. I will never again fall down the inglorious rabbit hole of js datetime manipulations.– matlemboCommented 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
-
9Hide the 120-odd bytes it takes to do this by including a 20k+ script! genius– frumbertCommented Feb 2, 2017 at 5:34
-
1Hey, 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
new Date().toTimeString().slice(0,8)
Note that toLocaleTimeString() might return something like 9:00:00 AM
.
-
2This 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 SeanCommented Nov 29, 2017 at 6:31
Use this way:
var d = new Date();
localtime = d.toLocaleTimeString('en-US', { hour12: false });
Result: 18:56:31
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.
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
Compact clock function:
setInterval(function() {
let d = new Date()
console.log(`${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`)
}, 1000);
new Date().toLocaleTimeString('it-IT')
The it-IT
locale happens to pad the hour if needed and omits PM or AM 01:33:01
-
1What 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. Commented Aug 6, 2020 at 13:30
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
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.– PeterCommented Feb 23, 2018 at 20:50
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>
-
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.– Tyler2PCommented Jan 7, 2021 at 18:19
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: ١٢:١٥:٣٠