How to convert 24 hours time format to 12 hours with AM or PM using javascript

Question

I have requirement if countdown timer in my project so I am using code for that but that code showing 24 hrs format but i want 12 hours format with AM or PM should show instead of 13,14,15 I want hours should come like this 1:00 PM,2:00 PM,3:00 PM.any idea how to do this ?

<p id="check_time"></p>
<p id="check_hours"></p>

<script>

var countDownDate = new Date("may 17, 2018 01:37:25").getTime();  //this the which i have to count for difference


var x = setInterval(function() {


    var now = new Date().getTime();


    var distance = countDownDate - now;


    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("check_hours").innerHTML = hours;

    document.getElementById("check_time").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";


    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

Possible duplicate of [Javascript: convert 24-hour time-of-day string to 12-hour time with AM/PM and no timezone](https://stackoverflow.com/questions/13898423/javascript-convert-24-hour-time-of-day-string-to-12-hour-time-with-am-pm-and-no) — Mamun, May 16 '18 at 05:43
Possible duplicate of [Converting 24 hour time to 12 hour time w/ AM & PM using Javascript](https://stackoverflow.com/questions/4898574/converting-24-hour-time-to-12-hour-time-w-am-pm-using-javascript) — Mark, May 16 '18 at 05:44
@Mamun actually i had checked this already and tried that way still I am unable to get as expected.will you please just review my code once again . — Anonymous, May 16 '18 at 05:46
https://stackoverflow.com/questions/30486086/converting-a-long-date-with-time-to-mm-dd-yyyy-hhmm-am-pm?answertab=active#tab-top Check above link for your question — Hiten, May 16 '18 at 05:49
There's no such thing as 12 hour count-down timer, because days have 24 hours ... — Teemu, May 16 '18 at 05:52
Aand what's this about: https://stackoverflow.com/questions/50350137/how-to-get-countdown-timer-in-12-hrs-like-am-or-pm-instead-of-24-hrs-using-jav#comment87716006_50350137 Looks pretty much the same question, but a different account ..? — Teemu, May 16 '18 at 05:53
@Teemu ok i agree days have 24 hours but most of the time we mention them as AM or PM . — Anonymous, May 16 '18 at 05:54
?? You can't create a 12-hour __count-down timer__ ... That wouldn't make any sense. You can show a 12-hour time, but not 12-hour elapsed time. — Teemu, May 16 '18 at 05:55

Mamun · Answer 1 · 2018-05-30T04:06:18.687

Try the following:

var countDownDate = new Date("june 17, 2018 01:37:25").getTime();  //this the which i have to count for difference

var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    var n = new Date();
    var h = n.getHours() < 10 ? '0' + n.getHours() : n.getHours();
    var min = n.getMinutes() < 10 ? '0' + n.getMinutes() : n.getMinutes();
    var sec = h < 10 ? '0' + n.getSeconds() : n.getSeconds();

    var time = n.getHours() + ':' + min + ':' + sec;
    document.getElementById("check_hours").innerHTML = tConvert(time);
    document.getElementById("check_time").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";


    if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);

function tConvert (time) {
 // Check correct time format and split into components
 time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

  if (time.length > 1) { // If time format correct
    time = time.slice (1);  // Remove full string match value
    time[5] = +time[0] < 12 ? ' AM' : ' PM'; // Set AM/PM
    time[0] = +time[0] % 12 || 12; // Adjust hours
  }
  return time.join (''); // return adjusted time or original string
}

<p id="check_time"></p>
<p id="check_hours"></p>
<p id="demo"></p>

How can I remove seconds of this format: example: 2:34 PM – huykon225 Jul 01 '21 at 07:34 — huykon225, Jul 01 '21 at 07:34

How to convert 24 hours time format to 12 hours with AM or PM using javascript

1 Answers1