Web Development

Time Zone issue: Local time to US or Canada (Pacific and Eastern ), Australia and New Zealand time converter using html and jquery

local time to US Pacific Eastern Australia or New zealand time converter

If you are working to convert the local time to US or Canada (Pacific and Eastern ), Australia or New Zealand time then you can use this code. Though using the same code and logic you can convert your local time to any Time Zone specific time.
This code is for advanced users and has 3(three) part. 1) Jquery part 2) HTML part 3) CSS part.

If you need any help regarding this code feel free to ask questions in comments section.

****JQuery part

<script>
  
jQuery(document).ready(function() {

var  lntime=0 ;
  jQuery('select.londontime').change(function(){ 
 lntime = $("option:selected", this).attr('value');
   
 });

 
 jQuery('select.timezone').change(function(){ 
 var tz =0;
  tz = $("option:selected", this).attr('value');

 var om= parseInt(lntime )+ parseInt(tz) ;
   
  if(om<0)
  {
  om=parseInt(om )+parseInt(24);
  }
  if(om>=12&&om<=24)
  {
 
  om = ((om + 11) % 12 + 1);
  om= om + " pm";
   jQuery( "#opcresult" ).empty().append(om);
  }
  else{ 
  om = ((om + 11) % 12 + 1);
    om= om + " am";
 jQuery( "#opcresult" ).empty().append(om);
 }
 
 
 });
  
});


</script>

****HTML part


<div id="omma">
<select class="londontime" data-target=".all-the-forms">
  <option value="0">12:00 am</option>
  <option value="1">1:00 am</option>
  <option value="2">2:00 am</option>
  <option value="3">3:00 am</option>
  <option value="4">4:00 am</option>
  <option value="5">5:00 am</option>
  <option value="6">6:00 am</option>
  <option value="7">7:00 am</option>
  <option value="8">8:00 am</option>
  <option value="9">9:00 am</option>
  <option value="10">10:00 am</option>
  <option value="11">11:00 am</option>
  <option value="12">12:00 pm</option>
  <option value="13">1:00 pm</option>
  <option value="14">2:00 pm</option>
  <option value="15">3:00 pm</option>
  <option value="16">4:00 pm</option>
  <option value="17">5:00 pm</option>
  <option value="18">6:00 pm</option>
  <option value="19">7:00 pm</option>
  <option value="20">8:00 pm</option>
  <option value="21">9:00 pm</option>
  <option value="22">10:00 pm</option>
  <option value="23">11:00 pm</option>
</select>


<select class="timezone"> 
	 <option timeZoneId="1" gmtAdjustment="GMT-08:00" useDaylightTime="1" value=" " selected disabled >Select Your Time Zone</option>
	<option timeZoneId="5" gmtAdjustment="GMT-08:00" useDaylightTime="1" value="-8">(GMT-08:00) Pacific Time (US & Canada)</option>
 
	<option timeZoneId="15" gmtAdjustment="GMT-05:00" useDaylightTime="1" value="-5">(GMT-05:00) Eastern Time (US & Canada)</option>
 
 	<option timeZoneId="75" gmtAdjustment="GMT+10:00" useDaylightTime="1" value="10">(GMT+10:00) Australia</option>
	<option timeZoneId="79" gmtAdjustment="GMT+11:00" useDaylightTime="1" value="11">(GMT+11:00) New Zealand</option>
 
</select>											
				
<div id="opcresult">

</div>
</div>

****CSS part

 
#omma select, #omma #opcresult {
    float: left !important;
}
#omma #opcresult {
    width: 56px;
 
    height: 20px;
    margin-left: 12px;
}
 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s