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; }