Script That Shows Current Time showing 12:5 instead of 12:05

Question

I'm having an issue with a bit of custom script that I wrote to show the time in different time zones around the world. Instead of saying HH:MM, if the minutes are less than 10, it says HH:M. How can I change it so that if it's less then 10, it sas HH:0M?

Screenshot:

Script:

$(document).ready(function() {
    function calculateTime(offset) {
        var currentDate = new Date()
        utc = currentDate.getTime() + (currentDate.getTimezoneOffset() * 60000);
        newDate = new Date(utc + (3600000*offset));
        return (newDate.getHours() === 0) ? 12 : ((newDate.getHours() > 12) ? newDate.getHours() - 12 : newDate.getHours()) + ' : ' + newDate.getMinutes() + ' ' + ((newDate.getHours() >  11) ? 'PM' : 'AM');
    }
    function displayTimes() {
        $(".chicago").html(calculateTime("-6"));
        $(".london").html(calculateTime("+1"));
        $(".shanghai").html(calculateTime("+8"));
    };
    displayTimes();
    window.setInterval(displayTimes, 5000);
});

HTML:

<table>
    <tr>
        <td><strong>Chicago</strong></td>
        <td align="right" class="time chicago">12:00PM</td>
    </tr>
    <tr>
        <td><strong>London</strong></td>
        <td align="right" class="time london">12:00PM</td>
    </tr>
    <tr class="last">
        <td><strong>Shanghai</strong></td>
        <td align="right" class="time shanghai">12:00PM</td>
    </tr>
</table>

possible duplicate of [getMinutes() 0-9 - how to with two numbers?](http://stackoverflow.com/questions/8935414/getminutes-0-9-how-to-with-two-numbers) — koopajah, Feb 19 '13 at 14:18

score 1 · Accepted Answer · answered Feb 19 '13 at 14:14

The function Date.getMinutes() returns a number between 0 and 59. So you need to check if you have less than 10 minutes and if so add a leading 0. Something like this:

var minutes = newDate.getMinutes();
if(minutes < 10) {
    minutes = '0' + minutes;
}
return (newDate.getHours() === 0) ? 12 : ((newDate.getHours() > 12) ? newDate.getHours() - 12 : newDate.getHours()) + ' : ' + minutes + ' ' + ((newDate.getHours() >  11) ? 'PM' : 'AM');

With your whole code:

$(document).ready(function() {
    function calculateTime(offset) {
        var currentDate = new Date()
        utc = currentDate.getTime() + (currentDate.getTimezoneOffset() * 60000);
        newDate = new Date(utc + (3600000*offset));
        var minutes = newDate.getMinutes();
        if(minutes < 10) {
            minutes = '0' + minutes;
        }
        return (newDate.getHours() === 0) ? 12 : ((newDate.getHours() > 12) ? newDate.getHours() - 12 : newDate.getHours()) + ' : ' + minutes + ' ' + ((newDate.getHours() >  11) ? 'PM' : 'AM');
    }
    function displayTimes() {
        $(".chicago").html(calculateTime("-6"));
        $(".london").html(calculateTime("+1"));
        $(".shanghai").html(calculateTime("+8"));
    };
    displayTimes();
    window.setInterval(displayTimes, 5000);
});

score 1 · Answer 2 · answered Feb 19 '13 at 14:21

This is called zero padding. Basically you convert the numerical value to a string and prepend a "0" character only if its less than 10.

function zeroPad(num) {
    if ( num<10 ) {
        return "0"+num;
    } else {
        return num.toString();
    }
}

Usage:

zeroPad(newDate.getMinutes()) // returns strings "05", or "15", or "01" etc.

score 0 · Answer 3 · answered Feb 19 '13 at 14:15

Try to zero pad the numbers.

function zeroFill(number, width) {
    width -= number.toString().length;
    if (width > 0) {
        return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
    }
    return number + ""; // always return a string
}


return (newDate.getHours() === 0) ? 12 : ((newDate.getHours() > 12) ? zeroFill(newDate.getHours() - 12, 2) : zeroFill(newDate.getHours(), 2)) + ' : ' + zeroFill(newDate.getMinutes(),2) + ' ' + ((newDate.getHours() >  11) ? 'PM' : 'AM');

score 0 · Answer 4 · answered Feb 19 '13 at 14:17

Try like below it will work...

(newDate.getMinutes() < 10 ? "0" : "" ) + newDate.getMinutes()

in your code add this :

return (newDate.getHours() === 0) ? 12 : ((newDate.getHours() > 12) ? newDate.getHours() - 12 : newDate.getHours()) + ' : ' + (newDate.getMinutes() < 10 ? "0" : "" ) + newDate.getMinutes() + ' ' + ((newDate.getHours() >  11) ? 'PM' : 'AM');

score 0 · Answer 5 · edited May 23 '17 at 11:53

0

Abstracting from the function itself you can check if number of minutes is less than 10 and pad result with 0. You can use ternary operators for that to do it inline if you like. Otherwise you might want to check similar questions already answered: jQuery Format Time

edited May 23 '17 at 11:53

Community

1
1

answered Feb 19 '13 at 14:17

Jura Khrapunov

1,024
6
14

Script That Shows Current Time showing 12:5 instead of 12:05

5 Answers5