20xd6/WebClock
1
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

Setup a proper dropdown for timezone selection.

Browse Source 
Some cleanup of the code was done.
Some of the testing and debug code needs removal.
This commit is contained in:
20xd6 2020-04-09 23:36:55 -04:00
parent ceccf35cf8
commit 6e85595081
2 changed files with 68 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
clock.js
View File

@ -5,7 +5,12 @@ window.onload = startInterval;
function startInterval(){
setInterval("startTime();",1000);
}
/* The function to update and format the time displayed on the page.
* The formating of Date() objects useing .toLocalString() is documented
* at the following urls:
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/DateTimeFormat
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
*/
function startTime(){
var current_time = new Date(),
our_tz = current_time.getTimezoneOffset,
@ -13,15 +18,27 @@ function startTime(){
+ current_time.getMinutes() + ":"
+ current_time.getSeconds();
document.getElementById('time_title').innerHTML = "Time is: "
+ formated_time.toLocaleString(
{timeZone: current_tz},
{dateStyle: "full"},
{hour12: "false"})
+ " " + current_tz;
+ current_time.toLocaleString('en-US',
{timeZone: current_tz,
hourCycle:'h24',
timeStyle:'long',
hour: '2-digit',
minute:'2-digit',
second:'2-digit',
timeZoneName:'short'});
//document.getElementById('time_title').innerHTML = current_tz;
document.getElementById('time_body').innerHTML = current_time.toLocaleString(
{timeZone: current_tz},
{dateStyle:"long"},
{hour12: "false"});
document.getElementById('time_body').innerHTML = current_time.toLocaleString('en-EN' ,{
timeZone: current_tz,
dateStyle:'long',
hourCycle:'h24',
weekday:'short',
month:'short',
day:'2-digit',
year:'numeric',
hour:'2-digit',
minute:'2-digit',
second:'2-digit',
timeZoneName:'short'})
+ " " + current_time.getTimezoneOffset();
document.getElementById('JStz').innerHTML = current_tz;
}

47
clock.php
View File

@ -41,7 +41,7 @@
echo "The full date and time:".
"<br>".
"<p id='time_body'>".
date("D M d Y H:i:s") .
date("D, M d, Y, H:i:s") .
" GMT" . date("O") . " (" . date("T") . ")"."</p>\n\t\t";
echo '<p>The user timezone is now set to ' . $selectedTimezone . "</p>\n\t\t";
echo '<p>The system timezone is now set to ' . $scriptTZ . "</p>\n";
@ -52,12 +52,47 @@
</p>
</div>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<!---
Dropdown menu to select the timezone you wish to use if the
autoselected one isn't right/what you want.
-->
<select name="userTimezone" class="tz_select">
<option value="" disabled selected class="invisable">Timezone</option>
<option value="EDT">EDT</option>
<option value="UTC">UTC</option>
<option value="America/Los_Angeles">PDT</option>
</select><br/>
<option value="Pacific/Kwajalein" >(GMT -12:00) Eniwetok, Kwajalein</option>
<option value="Pacific/Midway" >(GMT -11:00) Midway Island, Samoa</option>
<option value="America/Honolulu">(GMT -10:00 Hawaii No DST</option>
<option value="America/Adak" >(GMT -10:00) Hawaii</option>
<option value="America/Anchorage" >(GMT -9:00) Alaska</option>
<option value="America/Los_Angeles" >(GMT -8:00) Pacific Time (US &amp; Canada)</option>
<option value="America/Denver" >(GMT -7:00) Mountain Time (US &amp; Canada)</option>
<option value="America/Chicago" >(GMT -6:00) Central Time (US &amp; Canada), Mexico City</option>
<option value="America/New_York" >(GMT -5:00) Eastern Time (US &amp; Canada), Bogota, Lima</option>
<option value="America/Caracas">(GMT -4:30) Caracas</option>
<option value="America/Halifax" >(GMT -4:00) Atlantic Time (Canada), La Paz, Santiago</option>
<option value="America/St_Johns">(GMT -3:30) Newfoundland</option>
<option value="America/Sao_Paulo" >(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
<option value="America/Noronha" >(GMT -2:00) Mid-Atlantic</option>
<option value="Atlantic/Azores" >(GMT -1:00 hour) Azores, Cape Verde Islands</option>
<option value="UTC" selected="selected">(GMT) Western Europe Time, London, Lisbon, Casablanca, Greenwich</option>
<option value="Europe/Paris">(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris</option>
<option value="Europe/Kaliningrad" >(GMT +2:00) Kaliningrad, South Africa, Cairo</option>
<option value="Europe/Moscow">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
<option value="Asia/Tehran" >(GMT +3:30) Tehran</option>
<option value="Asia/Muscat" >(GMT +4:00) Abu Dhabi, Muscat, Yerevan, Baku, Tbilisi</option>
<option value="Asia/Kabul" >(GMT +4:30) Kabul</option>
<option value="Asia/Karachi" >(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
<option value="Asia/Calcutta" >(GMT +5:30) Mumbai, Kolkata, Chennai, New Delhi</option>
<option value="Asia/Kathmandu">(GMT +5:45) Kathmandu</option>
<option value="Asia/Almaty" >(GMT +6:00) Almaty, Dhaka, Colombo</option>
<option value="Asia/Yangon" >(GMT +6:30) Yangon, Cocos Islands</option>
<option value="Asia/Bangkok" >(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
<option value="Asia/Hong_Kong" >(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
<option value="Asia/Tokyo" >(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
<option value="Australia/Darwin" >(GMT +9:30) Adelaide, Darwin</option>
<option value="Australia/Sydney" >(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
<option value="Asia/Magadan" >(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
<option value="Asia/Kamchatka" >(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
</select>
<input type="submit" name="formSubmit" value="Update" >
</form>
<p id="JStz">JS Timezone</p>