jQuery Code to Show Time in Different Countries

This post has jQuery code to show the time in different time zones using jclock plugin. You can use this code to display world clock.

Here, I am displaying country names in dropdown, when you click on that it will show the current time in that country. See the live demo here.

We have used jQuery jclock plugin to display the time, need to pass the UTC offset value to the plugin to display time in country time zone. Offeset values are included as a value in the dropdown option items.

<html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.techtricky.com/wp-content/jquery/jquery.jclock.js"></script>
  <script type="text/javascript">
    $(document).ready(
        function() {
           $("#zones").change(function(){
           if ($('#time-cont .time').length>0){ $('#time-cont .time').remove();}
	   var offset = $(this).val();    
           if (offset == '') return;       

	   $('#time-cont').append('<div class="time"></div>');
           
           var options = {
            format:'<span class=\"dt\">%A, %d %B %I:%M:%S %P</span>',
            timeNotation: '12h',
            am_pm: true,
            fontFamily: 'Verdana, Times New Roman',
            fontSize: '20px',
            foreground: 'black',
            background: 'yellow',
            utc:true,
            utc_offset: offset
          }
            
          $('#time-cont .time').jclock(options);
       });
     });
    </script>
   
   </head>
   <body>
   <select id="zones">
    <option value="">--Select--</option>
    <option value="10">Australia</option> // Australia UTC offset value is 10
    <option value="8">China</option>
    <option value="5.5">India</option>
    <option value="12">Newzealand</option>
    <option value="0">UK</option>
    <option value="-5">US EST</option>

  </select>
  <div id="time-cont"></div>
  </body>
</html>

jClock plugin has lot of options to customize the display.

Above example, I have used few country names as samples, you can add as many as you want, you just need to find the UTC offset value of the country and add as the value of option item.

12 Comments

Add a Comment

Your email address will not be published. Required fields are marked *

Close Bitnami banner