Javascript World Clock Only Shows in Table

I am trying to display times from a few different cities around the world, and I have searched and Google'd and even used the answer found here: World Clock API in php or in javascript, but the clocks will only display in a table. I used this website's tutorial: (among others. This one seemed the most straight forward.).

I am trying to get it to display in my nav bar, similar to this page:, so a table does not seem like the way to go. Of course, I may be wrong.

Also, I am using Bootstrap, if that matters at all.

Let me know if you all have any ideas.




I would use moment.js for this

you will need these two files:

With moment.js, you could do the below:


<div id="myCoolNavBarr"></div>


//create a "moment" object from the current date/time
//use the timezone functionality to to set the timezone of the "moment"
//specify the format to display just the time 
var newYork ="America/Los_Angeles").format("h:mm: A");
var london ="Europe/London").format("h:mm: A");
var hongKong ="Asia/Hong_Kong").format("h:mm: A"); 
var tokyo ="Asia/Tokyo").format("h:mm: A");

//put them to use 
$("#myCoolNavBarr").append("NY  "+newYork+ " --- LDN  " +london+ " --- HK  " +hongKong+ " --- TYO  " +tokyo)

Here is a working JsFiddle


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.