Fix Javascript Date Display to Show 12 instead of 0 for 12pm

Question

I'm trying to show the next 15 minute time slot on my website. I am using the following

var date = new Date();
var time = date.getTime();
var mint = date.getMinutes();

for (var i = 1; i <= 1; i++) {
  var quarter_min = Math.ceil((mint / 15)) * 15;
  var d2 = new Date(time + (quarter_min - mint) * 60000);
  document.getElementById("demo2").innerHTML = 
    "(" + (d2.getHours() % 12) + ":" + d2.getMinutes() + ")";
}

The issue comes at 12pm (local time). The number displayed turns into 0:0 instead of 12:00 or 0:15 instead of 12:15.

Can this be corrected to show 12 instead?

If possible, would there be a way to add "am" or "pm" depending on the time chosen?

What did you do to try and get it working? Is there something in particular that you don't understand? This question is just asking us to do your work for you. — Michael Nakayama, Oct 13 '16 at 18:56
Sorry, I did try a ton of things. Let me summarize (I'm pure trial and error with JS) Mostly copy/pasted SO responses, including these: http://stackoverflow.com/questions/8888491/how-do-you-display-javascript-datetime-in-12-hour-am-pm-format http://stackoverflow.com/questions/17003202/how-to-get-am-or-pm http://stackoverflow.com/questions/29867862/how-to-get-current-time-in-a-format-hhmm-am-pm-in-javascript The first one I got to display but when I combined it with my current code, it broke. For the 12 hour thing at 12:00, I am clueless to be honest. — jc28, Oct 13 '16 at 19:01
a better question would be "How do you conditionally change the value of text in javascript?" From that you would either be able to deduce on your own that you should use an if-statement or the internet would guide you to ternary expressions. — Michael Nakayama, Oct 13 '16 at 19:02
haha no worries I totally hear you. I def tried to research just so basic at JS that I miss a lot! — jc28, Oct 13 '16 at 19:09

sanjeevprasad · Answer 1 · 2019-06-12T17:05:21.607

0

See conditional operator for more information on the ternary expression to conditionally set a value in javascript.

just replace...

(d2.getHours()%12)

with

(d2.getHours()%12==0?'12':d2.getHours()%12)

even shorter without operators as suggested in comment

( d2.getHours() % 12 || 12 )

edited Jun 12 '19 at 17:05

answered Oct 13 '16 at 18:56

sanjeevprasad

804
1
6
21

Directing the asker to ternary expressions would be a better answer to this question. – Michael Nakayama Oct 13 '16 at 18:57
This worked! @Sanjeev thank you so much! This is awesome! – jc28 Oct 13 '16 at 19:06
No need for the [*conditional operator*](http://ecma-international.org/ecma-262/7.0/index.html#sec-conditional-operator): `(d2.getHours() % 12 || 12)` :-) – RobG Oct 13 '16 at 22:35
usage of operators depends on the developer and situation... when what and how it going to be applied – sanjeevprasad Oct 13 '16 at 22:49
Given the choice of typing 22 characters or 43 to get the same result when all else is equal (clarity, robustness, etc.) which would you choose? ;-) – RobG Oct 13 '16 at 22:59

score 0 · Answer 2 · answered Oct 13 '16 at 18:57

There's a very easy way to do this. Just set it to 12 when it's equal to 0.

var hours = d2.getHours() % 12;
if (hours === 0)  {
  hours = 12;
}
document.getElementById("demo2").innerHTML = "(" + hours + ":" + d2.getMinutes() + ")";

To decide on AM or PM, just d2.getHours() before doing anything else. If it's <= 11, you get AM. Otherwise, it's PM.

var hours = d2.getHours();
var amPM = (hours <= 11) ? 'AM' : 'PM';
if (hours === 0)  {
  hours = 12;
}
document.getElementById("demo2").innerHTML = "(" + hours + ":" + d2.getMinutes() + ")" + amPM;

Fix Javascript Date Display to Show 12 instead of 0 for 12pm

2 Answers2