How to Convert Date/Time Display from 24hr to 12hr AM/PM

Question

The following script works well to display the date and time in a 24 hr format. I'd like to convert it to display time in a 12 hr AM/PM format instead and I can't get it to work. Please show me how it's done correctly?

<script type="text/javascript">
    function date_time(id) {
        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Sun', 'Mon, ', 'Tues, ', 'Wed, ', 'Thu, ', 'Fri, ', 'Sat');
        h = date.getHours();

        if (h < 10) {
            h = "0" + h;
        }

        m = date.getMinutes();

        if (m < 10) {
            m = "0" + m;
        }

        s = date.getSeconds();

        if (s < 10) {
            s = "0" + s;
        }

        result = '' + days[day] + ' ' + months[month] + ' ' + d + ' <br>' + h + ':' + m + ' ' + year + ':' + s;
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("' + id + '");', '1000');

        return true;
    }
</script>

@Sebastian Thanks for you reply, but I think I can learn more this way. It isn't just the outcome I'm looking for. — , Dec 18 '19 at 10:27
This may helps you: https://stackoverflow.com/questions/13898423/javascript-convert-24-hour-time-of-day-string-to-12-hour-time-with-am-pm-and-no — Maximilian Fixl, Dec 18 '19 at 10:44

score 0 · Answer 1 · edited Dec 18 '19 at 10:36

0

Try this.

function hours12(date) { 
   return (date.getHours() + 24) % 12 || 12; 
}

edited Dec 18 '19 at 10:36

Sebastian Kaczmarek

8,120
4
20
38

answered Dec 18 '19 at 10:28

Prathamesh Doke

797
2
16
38

Ali Torki · Accepted Answer · 2019-12-19T19:09:20.817

0

Update your function to:

function date_time(id) {
    date = new Date();
    year = date.getFullYear();
    month = date.getMonth();
    months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
    d = date.getDate();
    day = date.getDay();
    days = new Array('Sun', 'Mon, ', 'Tues, ', 'Wed, ', 'Thu, ', 'Fri, ', 'Sat');
    h = date.getHours();
    if (h < 10) {
        h = "0" + h;
    }
    m = date.getMinutes();
    if (m < 10) {
        m = "0" + m;
    }
    s = date.getSeconds();
    if (s < 10) {
        s = "0" + s;
    }
    const pmOrAm = h > 12 ? "pm" : "am";
    const hoursIn12 = h > 12 ? h - 12 : h;
    result = '' + days[day] + ' ' + months[month] + ' ' + d + ' <br>' + hoursIn12 + ':' + m + pmOrAm + ' ' + year + ':' + s;

    document.getElementById(id).innerHTML = result;
    setTimeout('date_time("' + id + '");', '1000');
    return true;
}

edited Dec 19 '19 at 19:09

answered Dec 18 '19 at 10:33

Ali Torki

1,929
16
26

Thanks, but although this adds an AM or PM to the display, the clock itself is still in 24-hour, not 12-hr. – Dec 18 '19 at 22:42
I've updated the answer and you can get date hours in 12. – Ali Torki Dec 19 '19 at 19:10
Thank you again Ali Torki. The script now works perfectly as a date/time 12-hr AM/PM clock. – Dec 19 '19 at 22:11
Yours very welcome, make this answer to the best answer to help other people. – Ali Torki Dec 20 '19 at 10:41

score 0 · Answer 3 · answered Dec 18 '19 at 10:37

0

So simple try this

   from24to12(hours: any) {
        return (hours > 12) ? hours - 12 : (hours == 0 ? 12 : hours);
    };

    getAmPm(hours: any) {
        return (hours < 12) ? "am" : "pm";
    };

answered Dec 18 '19 at 10:37

Vasim Hayat

909
11
16

How to Convert Date/Time Display from 24hr to 12hr AM/PM

3 Answers3