Dynamic Timezone : Same Time in Different Countries
In this tutorial we have explained how to create dynamic time zone which shows same time for different countries. You can use this feature for your online schedules to provide time to all users according to their country time.
Output:
You can add Timezones in select list according to your needs.
When you change the timezone from select dropdown list, it will change the time of label which is currently “05:00 AM” and display new time of your selected time. Here, I used “05:00 AM” as a static time so in this we can find your timezone’s “05:00 AM” of any other timezone.
Date.UTC(0, 0, 0, 13, 0, 0) here, ’13’ is describing hour, you can add as your static time it will must be between 0-24.
Conclusion: I hope this tutorial helpful for you, if you have any issue with this, please comment below.
Thank You!
<script type="text/javascript">
function dynamicTimeChange(timezone){
let date = new Date(Date.UTC(0, 0, 0, 13, 0, 0));
SlotTime = date.toLocaleString("en-US", {timeZone: timezone, hour: '2-digit', minute:'2-digit'});
document.getElementById("dynamictzDiv").innerHTML = SlotTime;
}
</script>
<label style="text-align: center;font-size: initial;">Select Your Timezone</label>
<?php
function select_Timezone($selected = '') {
// Create a list of timezone
$OptionsArray = timezone_identifiers_list();
$select= '<select name="SelectContacts" onchange="dynamicTimeChange(this.value);" id="selectTime" style="width: 120px;font-family: FontAwesome;">
<option disabled selected>
Please Select Timezone
</option>
<option value="Canada/Pacific">Canada/Pacific Standard Time</option>
<option value="Canada/Atlantic">Canada/Atlantic Standard Time</option>
<option value="Australia/West">Australian Central Western Standard Time&lt;/option&gt;
<option value="Australia/Queensland">Australia/Australian Eastern Standard Time</option>';
$select.='</select>';
return $select;
}
echo select_Timezone() . '<br>';
?>
<div class="timeDivPremiumSch" style="margin-top: 12px;">
<label id="dynamictzDiv">05:00 AM</label>
</div>
?>