CODEWITHSUNDEEP
javascript
charlie
charlie

Reputation: 323

Leading zeros in minutes

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>

Upvotes: 12

Views: 43114

Answers (6)

Plynx
Plynx

Reputation: 11471

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"

Upvotes: 16

Naderio
Naderio

Reputation: 1419

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

Upvotes: 2

dmo
dmo

Reputation: 5321

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;

Upvotes: 14

Krtek
Krtek

Reputation: 11

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

Upvotes: 1

Pete
Pete

Reputation: 1305

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

(new Date()).toTimeString().substr(0,5)

Upvotes: 39

Tomasz Nurkiewicz
Tomasz Nurkiewicz

Reputation: 341003

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

Upvotes: 15

Related Questions