September 20, 2011
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.
jQuery Code to Display Top News using YQL JSONP API Service
jQuery Code: show character count in text area when user enters the text
jQuery Datepicker: How to Mark the Holidays on Calendar
About Author
admin
12 Comments
The output is wrong :(. I see 1 hour difference for india and timing for other countries are also not correct
1 hour difference is because of Day light saving time. if something is wrong then you just need to change the dropdown option value to the country GMT offset value.
is it possible to get them in a table. instead of options?
Dear sir,
this j query code for world clock is not being compatible with IE but working in firefox & chrome.
please suggest me how to make compatibility with IE
mail me……….
9873718915
Am I doing something wrong – timeNotation: ’24h’, doesn’t work?
Nevermind, had to change to %H from %I
thanks for this i really appreciate this.. but is there a way i could get the time in different region in australia? Western Australia
Nortern Territory
Queensland
South Australia
New South Wales, Victoria, Tasmania
I would like to see the date and time for several international locations for a future date that is selected for Jakarta, Indonesia. Is this control easy to modify to let me select a date and time in Jakarta and show the dates and times in the locations I am interested in?
I would like to modify this so it could be used to show the date and time for several international locations for a future date that is selected for Jakarta, Indonesia as the primary locaiton. Is this control easy to modify to let me select a date and time in Jakarta and show the dates and times in the locations?
Thanks you you help me
I am trying to display time zone without using dropdown but it is showing error can you please help
i want to do it for different time zones for example france has 12 time zones how can it be calculated and displayed