Display Time in 12 Hour Format in JavaScript

Question

I want to display Time in 12 hour format by altering the following code. i Tried Various Techniques but no luck, hope to find The solution from u guys .

<script type="text/javascript">

$.fn.androClock = function() {
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"];
function getTime() {
  var date = new Date(),
  hour = date.getHours();
  return {
    day: days[date.getDay()],
    date: date.getDate(),
    month: months[date.getMonth()],
    hour: appendZero(hour),
    minute: appendZero(date.getMinutes())
  };
}
function appendZero(num) {
  if (num < 10) {
    return "0" + num;
  }
  return num;
}
function refreshClock() {
  var now = getTime();
  $('#date').html(now.day + "<br>" + now.date + '. ' + now.month);
  $('#time').html(now.hour + ":" + now.minute);
  setTimeout(function() {
    refreshClock();
  }, 10000);
}
refreshClock();
  };
$('#andro-clock').androClock();

</script>

possible duplicate of Replace military time to normal time with Javascript — Brandon J. Boone
– Brandon J. Boone, Commented May 13, 2013 at 19:14
Possible duplicate of Replace military time to normal time with Javascript — Michael Freidgeim
– Michael Freidgeim, Commented Aug 24, 2019 at 23:10

Brandon J. Boone · Accepted Answer · 2013-05-16 16:06:08Z

6

EDIT

Based on your comments in rahul's answer...

Update the line:

hour: appendZero(hour),

to

hour: appendZero(((hour + 11) % 12) + 1) Live Demo

Live Demo

var formatTime = (function () {
    function addZero(num) {
        return (num >= 0 && num < 10) ? "0" + num : num + "";
    }

    return function (dt) {
        var formatted = '';

        if (dt) {
            var hours24 = dt.getHours();
            var hours = ((hours24 + 11) % 12) + 1;
            formatted = [formatted, [addZero(hours), addZero(dt.getMinutes())].join(":"), hours24 > 11 ? "pm" : "am"].join(" ");            
        }
        return formatted;
    }
})();

alert(formatTime(new Date()));

edited May 16, 2013 at 16:06

answered May 13, 2013 at 19:05

Brandon J. Boone

16.5k4 gold badges78 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rahul maindargi · Accepted Answer · 2013-05-16 10:43:08Z

4

DEMO

function getTime() {
  var date = new Date(),
  hour = date.getHours();
 // var dd = "AM";
  var h = hour;
    if (h > 12) {
        h = hour-12;
   //     dd = "PM";
    }
    if (h == 0) {
        h = 12;
    }
  return {
    day: days[date.getDay()],
    date: date.getDate(),
    month: months[date.getMonth()],
    hour: appendZero(h),
    minute: appendZero(date.getMinutes()),
    //  dd: dd  
  };
}


function refreshClock() {
  var now = getTime();
  $('#date').html(now.day + "<br>" + now.date + '. ' + now.month);
 // $('#time').html(now.hour + ":" + now.minute+" "+now.dd);
  $('#time').html(now.hour + ":" + now.minute);
  setTimeout(function() {
    refreshClock();
  }, 10000);
}

edited May 16, 2013 at 10:43

answered May 13, 2013 at 19:04

rahul maindargi

5,7052 gold badges18 silver badges23 bronze badges

2 Comments

Apple Arbaz Over a year ago

This is what i need but i dont need am/pm , just the 12 hour time.

rahul maindargi Over a year ago

See updated code. commented AP PM logic... If it helped please accept the answer

Collectives™ on Stack Overflow

Display Time in 12 Hour Format in JavaScript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related