Why Doesn't The Time Display?

Question

<script>
var currentTime = new Date();

var futureTime = new Date(currentTime.getTime());
futureTime.setMinutes(futureTime.getMinutes() + 10);

var pastTime = new Date(currentTime.getTime());
pastTime.setMinutes(pastTime.getMinutes() - 50);
</script>

all I'm trying to do is if the current time is 6:00PM, to display 50 minutes before then which is 5:10PM and I'm also trying to display another time 10 minutes after the current time which is 6:10PM.. How do I do this so it is formatted exactly as X:XXPM?

I put the above code into my page and I see nothing at all..

All you're doing is setting variables. What do you expect to see? — Evan Davis, Oct 09 '13 at 16:49
Look at [document.write](https://developer.mozilla.org/en-US/docs/Web/API/document.write) — Jason Sperske, Oct 09 '13 at 16:50
@JasonSperske what? No, don't encourage document.write. Print to a div or something! — Evan Davis, Oct 09 '13 at 16:52
You wouldn't see anything, you're not outputting anything, such as with console.log. Regardless, you are trying to call setMinutes on the numeric value that is returned by a Javascript date's getTime() method -- you want to be calling setMinutes on the data object itself. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date — Dexygen, Oct 09 '13 at 16:53
@Mathletics, for my own code I 100% agree, but it seemed like an easy place to start with minimal understanding of the DOM :) — Jason Sperske, Oct 09 '13 at 16:55
@Mathletics Even with `document.write(pastTime)` it displays as `Wed Oct 09 2013 12:02:33 GMT-0400 (EDT)` so how do I just get the simple `X:XXPM`? but I see you are saying to print to a div so how would that be done? — Joe Bobby, Oct 09 '13 at 16:56
[moment.js](http://momentjs.com/) will do amazing things with dates and times if you don't want to understand how to format them by hand. — Jason Sperske, Oct 09 '13 at 16:58

score 1 · Answer 1 · edited May 23 '17 at 10:25

document.write(currentTime + '<br>' + futureTime + '<br>' + pastTime);

or

var str = currentTime + '<br>' + futureTime + '<br>' + pastTime;
document.getElementById('myDiv').innerHTML = str;

or

var str = currentTime + '<br>' + futureTime + '<br>' + pastTime;
document.getElementById('myDiv').appendChild(str);

or

document.getElementById('myDiv1').appendChild(pastTime);
document.getElementById('myDiv2').appendChild(currentTime);
document.getElementById('myDiv3').appendChild(futureTime);

and your html would look like

<div id='myDiv1'></div>
<div id='myDiv2'></div>
<div id='myDiv3'></div>

UPDATE

To format dates - that is a different question - and is already answered by countless posts.

Here's a great one.

or

10 ways to format time and date using JavaScript.

NOTE

Jason Sperske made a comment I couldn't ignore - moment.js is amazing.

Even with `document.write(pastTime)` it displays as `Wed Oct 09 2013 12:02:33 GMT-0400 (EDT)` so how do I just get the simple `X:XXPM`? — Joe Bobby, Oct 09 '13 at 16:57

Tyler · Accepted Answer · 2013-10-09T17:26:55.327

You need to send the values to some HTML elements:

HTML:

<p id="future"></p>
<p id="past"></p>

Javascript:

function formatTime(dateObj){

    var dateString = "";
    var hour = dateObj.getHours();  
    var minutes = dateObj.getMinutes();
    var pm = false;

    if (hour > 12)
        pm = true;

    if (pm === true){
        var pmHour = (hour>=13) ? hour-12:hour;
        dateString += pmHour.toString();
        dateString += ":";
        dateString += minutes.toString();
        dateString += " pm";
    }

    else{
        dateString += hour.toString();
        dateString += ":";
        dateString += minutes.toString();
        dateString += " am";
    }

    return dateString;
}

var currentTime = new Date();

var futureTime = new Date(currentTime.getTime());
futureTime.setMinutes(futureTime.getMinutes() + 10);
var f = document.getElementById("future");
f.innerHTML = formatTime(futureTime);

var pastTime = new Date(currentTime.getTime());
pastTime.setMinutes(pastTime.getMinutes() - 50);
var f = document.getElementById("past");
f.innerHTML = formatTime(pastTime);

JSFiddle Example

this seems like a good solution but how do I output only `X:XXPM` instead of something like `Wed Oct 09 2013 12:08:38 GMT-0400 (EDT)`? — Joe Bobby, Oct 09 '13 at 16:58
@JoeBobby updated my answer/example with a JS function which formats the time — Tyler, Oct 09 '13 at 17:09
@just updated it again, it wouldn't have displayed 12:xxpm correctly. — Tyler, Oct 09 '13 at 17:27

score 0 · Answer 3 · answered Oct 09 '13 at 16:59

Here's the solution:

var currentTime = new Date();

var futureTime = new Date(currentTime.getTime());
futureTime.setMinutes(futureTime.getMinutes() + 10);

var pastTime = new Date(currentTime.getTime());
pastTime.setMinutes(pastTime.getMinutes() - 50);

function formatAMPM(date) {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var strTime = hours + ':' + minutes + ' ' + ampm;
  return strTime;
}


alert('Current Time: ' + formatAMPM(currentTime));

alert('Future Time: ' + formatAMPM(futureTime));

alert('Past Time: ' + formatAMPM(pastTime));

Try it here: http://jsfiddle.net/atheos/Wx2vw/

Why Doesn't The Time Display?

3 Answers3

UPDATE

NOTE