Format PHP and Javascript clock

Question

I took this code from PHP with javascript code, live clock , and successfully put it on my website. The code is here:

<?php
function d1() {
    $time1 = time();

    $date1 = date("h:i:sa",$time1);
    echo $date1;
}
?>
<script>
    var now = new Date(<?php echo time() * 1000 ?>);
    function startInterval(){
        setInterval('updateTime();', 1000);
    }
    startInterval();//start it right away
    function updateTime(){
        var nowMS = now.getTime();
        nowMS += 1000;
        now.setTime(nowMS);
        var clock = document.getElementById('qwe');
        if(clock){
            clock.innerHTML = now.toTimeString();//adjust to suit
        }
    }
</script>
<div id="qwe"></div>

However, the time format shows up as this:

21:41:44 GMT-0400 (Eastern Standard Time)

I want it to show up as

9:41:44 PM

I assume that this line

 clock.innerHTML = now.toTimeString();//adjust to suit

is the one I need to change, but can't find any formats that show it very simply. Do I need to write something up myself to show it in this custom format?

http://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript this should solve your problem — maraca, Aug 17 '15 at 01:49
thank you, thank you, I can't believe I didn't find this before — Andrew Hu, Aug 17 '15 at 01:52

score 5 · Accepted Answer · answered Aug 17 '15 at 02:07

5

I want to suggest you try to use Developer tools in Chrome so you could examine what are the properties and functions available for an object.

Try this, F12 to the developer tool and in there type

var date_new = new Date()

then type date_new. after pressing that dot, you'll see what potential functions are available to you

Of course, its good to read on official documentation to know all about this, but in case you don't have internet connection or in a hurry. you can just look around at those functions of Date Object.

Have fun coding!

answered Aug 17 '15 at 02:07

fedmich

5,343
3
37
52

Btw momentJs is also easy to use and quite lightweight already. But sometimes pure JavaScript rocks too :) – fedmich Aug 17 '15 at 02:08
I tried momentJs, for some reason it isn't working I have it here http://jsfiddle.net/0qze164t/ can you help me identify what is wrong here? did I incorrectly download moment.js? – Andrew Hu Aug 17 '15 at 02:34
Code school has a free course on devTools for chrome. https://www.codeschool.com/courses/discover-devtools – J-Dizzle Aug 17 '15 at 03:33

score 1 · Answer 2 · answered Aug 17 '15 at 01:57

You could try and do something like this.

function formatTime(date) {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  var ampm = hours >= 12 ? 'PM' : 'AM';

  hours = hours % 12;
  hours = hours ? hours : 12; 

  minutes = minutes < 10 ? '0'+minutes : minutes;
  return hours + ':' + minutes + ':' + seconds + ' ' + ampm;
}

// your existing code with modification
...
clock.innerHTML = formatTime(now);//adjust to suit
...

If you happen to be working with date time too much and are having to use functions like above, you should consider using momentjs.

Format PHP and Javascript clock

2 Answers2