Converting a 24 hour clock to a 12 hour clock and keeping track of AM/PM

Question

I need to convert the 24-hour time I get from the d.getHours() function to a 12-hour format while keeping track of AM/PM.

My most recent iteration looks something like this:

  // get current date
  var date = new Date();
  // get current hours
  var currentHour = date.getHours();
  // for loop counter variable
  var i;

  console.log("Current hour: " + currentHour);
  // used when currentHour + i goes past 24. (25th hour is 0).
  resetCounter = 0;

  for (i = 1; i < 9; i++) {
    // sets variable for spans
    var hourlyForecastHours = document.getElementById("hourly" + i);
    var hourlyForecastTemp = document.getElementById("hourly-temp" + i);
    var hourlyForecastDesc = document.getElementById("hourly-desc" + i);
    
    // first hour to be displayed is currentHour (now) plus i hour.
    hour = currentHour + i;

    // if currentHour + i is greater than or equal to 24
    if (hour >= 24) {
      // set hour to 0 + resetCounter
      hour = 0 + resetCounter;
      // increment resetCounter
      resetCounter++;
    }

    // convert 24 hr time to 12 hr time

    hour = hour % 12;

    // if hr is 0, make it show 12.

    if (hour == "0") {
      hour = 12;
    }

    hourlyForecastHours.textContent = hour;
    console.log("Hour + " + i + ": " + hour);
  }

This does what I need it to. As of the current hour it outputs "9, 10, 11, 12, 1, 2, 3".

Now I need to keep track of AM/PM. I've tried things such as a variable that is set to "AM" or "PM" if the 24 hour format time is < 12 or >= 12 and then appending that to the end of the converted-to-12-hour time.

I'm getting confused about it all, how can I get this to work?

Does this answer your question? [Changing the 1-24 hour to 1-12 hour for the "getHours()" Method](https://stackoverflow.com/questions/10556879/changing-the-1-24-hour-to-1-12-hour-for-the-gethours-method) — Javier Larroulet, Sep 06 '20 at 03:32

FluffyKitten · Accepted Answer · 2020-09-06T03:25:29.897

You can do it like this (the item # refers to the code example so you can see exactly where it goes):

declare a variable to track am/pm

var timeAmPm = "am";
Before you reset the time to 12-hour, check if it is > 12 and set var to am or pm:

(hour > 12) ? timeAmPm = "pm" : timeAmPm = "am";
Use the variable as required, e.g.

var time = "Hour + " + i + ": " + hour + timeAmPm;

Working Example (using your code - except for the code accessing the HTML elements as you didn't give us those):

// get current date
  var date = new Date();
  // get current hours
  var currentHour = date.getHours();
  // for loop counter variable
  var i;

  // 1. declare a variable to track am/pm
  var timeAmPm = "am"; 
  
  console.log("Current hour: " + currentHour);
  // used when currentHour + i goes past 24. (25th hour is 0).
  resetCounter = 0;

  for (i = 1; i < 24; i++) {
 
    // first hour to be displayed is currentHour (now) plus i hour.
    hour = currentHour + i;

    // if currentHour + i is greater than or equal to 24
    if (hour >= 24) {
      // set hour to 0 + resetCounter
      hour = 0 + resetCounter;
      // increment resetCounter
      resetCounter++;
    }

    // 2. Before you reset the time, check if it is am or pm
    (hour > 12) ? timeAmPm = "pm" : timeAmPm = "am";

    // convert 24 hr time to 12 hr time
    hour = hour % 12;

    // if hr is 0, make it show 12.

    if (hour == "0") {
      hour = 12;
    }

    // 3. Use the variable as required
    console.log("Hour + " + i + ": " + hour + timeAmPm);
  }

@LucasCampbell Do you mean in the snippet or in your own code? Because the snippet is showing both `am` and `pm` for me . What time is it where you are and I'll try adjust the time to check. — FluffyKitten, Sep 06 '20 at 03:21
Fixed by adding an else statement. `if (hour > 12) { timeAmPm = "pm"; } else { timeAmPm = "am"; }` — Lucas Campbell, Sep 06 '20 at 03:24
@LucasCampbell I've updated the answer to use the ternary if/else (see #2) if you want a neater way to do this :) — FluffyKitten, Sep 06 '20 at 03:30

jmrker · Answer 2 · 2020-09-06T04:07:23.437

0

Slightly different solution. Can use EITHER ternary OR if (condition), not BOTH.

const hr = (hour) => {
  let ampm = (hour < 12) ? 'am' : 'pm';
// ternary solution
  let hr = ((hour % 12) == 0) ? 12 : hour%12;
// alternate solution
//  let hr = (hour % 12);  if (hr == 0) hr = 12;
  return hr+ampm;
}

for (let hour=0; hour<24; hour++) {
  console.log('military: ',hour,'analog:',hr(hour));
}

edited Sep 06 '20 at 04:07

answered Sep 06 '20 at 04:00

jmrker

472
4
11

Converting a 24 hour clock to a 12 hour clock and keeping track of AM/PM

2 Answers2

Linked

Related