12

I created a clock to be placed in the header of my website. The time is not displaying a zero for minutes < 10. For example if the time is 10:50, it will only show 10:5 ,I found a solution but unsure of how to implement it. Also if there is a better method please share.

 var current;
window.onload = function () {

    current = new Date();

    document.getElementById("clock").innerHTML = current.getHours() + ":" +      current.getMinutes();

This is what I need 

                if (minutes < 10)
                minutes = "0" + minutes

and this is the container for my clock

    <span id="clock">&nbsp</span>
charlie
  • 323
  • 2
  • 7
  • 16
  • You need to display the units as strings instead of numbers or the insignificant zeros will be removed. – jbabey Jan 25 '13 at 20:11

6 Answers6

39

You can just grab the first 5 characters of the time string.

(new Date()).toTimeString().substr(0,5)
Pete
  • 1,305
  • 1
  • 12
  • 36
16

Since you're likely to run into presentational issues in the future along the same lines, I'd recommend picking a favorite string formatting function for Javascript.

Some examples:

Then you can do something like "{0:00}:{1:00}".format(current.getHours(), current.getMinutes()) or even better,

var d = new Date();
var s = d.format("hh:mm:ss tt");
// Result: "02:28:06 PM"
Plynx
  • 11,341
  • 3
  • 32
  • 33
15

And what is your issue?

var minutes = (current.getMinutes() < 10? '0' : '') + current.getMinutes();

Since you'll have the same problem with hours, wrap it in a small utility function:

function pad(var value) {
    if(value < 10) {
        return '0' + value;
    } else {
        return value;
    }
}

And later simply:

pad(current.getHours()) + ":" + pad(current.getMinutes())
Tomasz Nurkiewicz
  • 334,321
  • 69
  • 703
  • 674
13

I like this way of doing things... Javascript add leading zeroes to date

const d = new Date();
const date = (`0${d.getMinutes()}`).slice(-2);
console.log(date); // 09;

2019 Update: But I now prefer 

const d = new Date();
const date = String(d.getMinutes()).padStart(2, '0');
console.log(date); // 09;
dmo
  • 5,102
  • 3
  • 25
  • 28
1

I tried this way. It's not brief but it works.

var dt = new Date();
if (parseInt(dt.getMinutes()) < 10) {minutes = "0" + dt.getMinutes();} else minutes = dt.getMinutes();
if (parseInt(dt.getSeconds()) < 10) {seconds = "0" + dt.getSeconds();} else seconds = dt.getSeconds();

var time = dt.getHours() + ":" + minutes + ":" + seconds;
document.write("Now is:" + time);

//Result: Now is: 22:47:00

I hope it will be useful

Krtek
  • 11
  • 1
  • It works indeed, but you don't have to use such an `if` or even the `parseInt`, just `(dt.getMinutes() < 10 ? "0" : "") + dt.getMinutes();` does the trick. `getMinutes()` and all the other functions return an int already. :-) – Mason Jul 12 '17 at 11:58
1

Today I'm using .toLocaleTimeString(), which by default returns something like "08:30:00" - based on the users browser locale. you can force a locale like this:

(new Date()).toLocaleTimeString("de-DE")

and way more interesting is the 2nd options-parameter:

(new Date()).toLocaleTimeString(
    "de-DE", 
    {
        hours: "2-digit",
        minutes: "2-digit",
        seconds: "2-digit",
    }
)

ifyou remove e.g. the seconds from the options, it will print only the hours and minutes.

So based on the original question, today I would use this:

var current;
window.onload = function () {
    current = new Date();
    document.getElementById("clock")
        .innerHTML = current.toLocaleTimeString(
            navigator.language,
            {
                hours: "2-digit",
                minute: "2-digit"
            }
        );

and a bit cleaner/shorter:

var current;
var timeOptions = {
    hours: "2-digit",
    minute: "2-digit"
};
window.onload = function () {
    current = new Date();
    document
        .getElementById("clock")
        .innerHTML = current.toLocaleTimeString(navigator.language, timeOptions);
Naderio
  • 1,306
  • 11
  • 26