Date and time

[tapirul]

I got from http://www.javascriptkit.com/ two scripts (one for drop-down world clock, one for date) and merged them in one. I changed a bit the text for credits (from "this script is provided by:" to "Credits") to fit in a 170 px left block. You can modify dimensions, font size, font face etc.

Code Select Expand


<table border="0" width="200" cellspacing="0" cellpadding="3">
<form name="where">
  <tr>
    <td width="100%">
<select name="city" size="1" onchange="updateclock(this);">
<option value="" selected>Local time</option>
<option value="2">Bucuresti</option>
<option value="-8">Oregon</option>
<option value="-5">Ontario</option>
<option value="0">London GMT</option>
<option value="1">Rome</option>
<option value="7">Bangkok</option>
<option value="8">Hong Kong</option>
<option value="9">Tokyo</option>
<option value="10">Sydney</option>
<option value="12">Fiji</option>
<option value="-10">Hawaii</option>
<option value="-8">San Francisco</option>
<option value="-5">New York</option>
<option value="-3">Buenos Aires</option>
</select>

</td>
  </tr>
  <tr>
    <td width="100%">
<script language="JavaScript">

/*
Drop Down World Clock- By JavaScript Kit (http://www.javascriptkit.com)
Portions of code by Kurt @ http://www.btinternet.com/~kurt.grigg/javascript
This credit notice must stay intact
*/

if (document.all||document.getElementById)
document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br>')

zone=0;
isitlocal=true;
ampm='';

function updateclock(z){
zone=z.options[z.selectedIndex].value;
isitlocal=(z.options[0].selected)?true:false;
}

function WorldClock(){
now=new Date();
ofst=now.getTimezoneOffset()/60;
secs=now.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=now.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;
if (hr < 0) hr+=24;
if (hr > 23) hr-=24;
ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toLowerCase();

hr2 = hr;
if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2

var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm;

if (document.all)
worldclock.innerHTML=finaltime
else if (document.getElementById)
document.getElementById("worldclock").innerHTML=finaltime
else if (document.layers){
document.worldclockns.document.worldclockns2.document.write(finaltime)
document.worldclockns.document.worldclockns2.document.close()
}


setTimeout('WorldClock()',1000);
}

window.onload=WorldClock
//-->
</script>

<!--Place holder for NS4 only-->
<ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 16px Arial;"></layer></ilayer>

<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<medium><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></medium>")
</script>

<font face="arial" size="-2">Credit:<a href="http://www.javascriptkit.com">JavaScript Kit</a></font>
</td>
</form>
  </tr>
</table>

See live here

[RoarinRow]

Very cool, but I notice the box is stick out a little 

[tapirul]

on my page? looks okay to me in SMF default. (maybe depends on screen's resolution?).
see here:

[tapirul]

what can be confusing about this script is the fact that the date is the local date regardless of what timezone you select in the clock (being separate scripts and not related)

[ACE844]

I just installed this clock and I think it's phenominal. My only question is how could I change the display from 12/hr time to 24 hr time? I.e.: 1PM EST or GMT-5 in 12 hr time = 1:00 PM; in 24 hr time=13:00. Does anyone know what edits would be needed or what i could change to get the time displayed like this?
Thanks,
ACE844

[Smoky]

If i am right, it goes by the time set into your pc.. try right clicking on your time and date, and change that to the 24hr format (or military time). 

[ACE844]

Smoky,

Thanks, I'll try it.

[JPDeni]

I don't know much about javascript, but it looks like you need change

Code Select Expand


ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toLowerCase();

hr2 = hr;
if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2

var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm;


to

Code Select Expand


hr2 = hr;
if (hr2<10) hr2="0"+hr2

var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs);


Be sure to keep a backup of the original code in case this doesn't give you what you want.

[Smoky]

Thanks JPDeni.. didnt think of that as I thought it would pick up your time settings based off the pc you are using.. (didnt see that info in the script) hope it works for you guys..

[ACE844]

JP,

   The code change worked like a charm thank you so much for your help.
ACE844