[SOLVED] Date & Time

Pavlos1316 · June 9, 2009

Hello all,

I have this code for date and time and it works great, but because I don't know much about javascript I cannot customize some things like font-color. (this is my only code with javascript in my web site) Tell me if you can help.

<!--
body {
   margin-left: 0px;
   margin-top: 0px;
   background-color: #FF0000;
   margin-right: 0px;
   margin-bottom: 200px;
   background-image: url();
}
.style1 { font-size: 18px }
.style2 {
   font-size: 18px;
   color: #FF0000;
}
.style3 {
font-color: #000000;
}
-->
</style>
<script type="text/javascript">

var weekdaystxt=["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

function showLocalTime(container, servermode, offsetMinutes, displayversion){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.displayversion=displayversion
var servertimestring=(servermode=="server-php")? '<? print date ("D dS F Y H:i:s", time())?>' : (servermode=="server-ssi")? '<!--#config timefmt=" %a, %d %B %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
this.localtime=this.serverdate=new Date(servertimestring)
this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
this.updateTime()
this.updateContainer()
}

showLocalTime.prototype.updateTime=function(){
var thisobj=this
this.localtime.setSeconds(this.localtime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

showLocalTime.prototype.updateContainer=function(){
var thisobj=this
if (this.displayversion=="long")
this.container.innerHTML=this.localtime.toLocaleString()
else{
var hour=this.localtime.getHours()
var minutes=this.localtime.getMinutes()
var seconds=this.localtime.getSeconds()
var dayofweek=weekdaystxt[this.localtime.getDay()]
this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+"("+dayofweek+")"
}
setTimeout(function(){thisobj.updateContainer()}, 1000) //update container every second
}

function formatField(num, isHour){
if (typeof isHour!="undefined"){ //if this is the hour field
var hour=(num>24)? num-24 : num
return (hour==0)? 24 : hour
}
return (num<=9)? "0"+num : num//if this is minute or sec field
}

</script>
</head>

<body>
    <table width="100%" border="0" align="center">
      <tr>
      <th scope="col" width="230</th><div class="style3"><span id="timebox"></span></div>
<script type="text/javascript">
new showLocalTime("timebox", "server-php", 420, "long")
</script><div></div>
     </tr>
     </table>
     </body>
</html>

The problems...

1. How do I customize the time and date font color, style & size? (what ever I do is not working! most likely cause I don't know what I am doing with javascript )

2. In the column where time and date is displayed I want to be displayed in 2 lines instead of one... ex

1/2/2009

00:00:00

not 1/2/2009 00:00:00

3. I want to see a 24h time and not 12h without showing AM or PM.

ex 00:00:00 not 1:9:36 PM

Thank you

Pavlos1316 · June 10, 2009

Good mornig,

Font problem I fixed it... Now I am trying to find out why I cannot change the date format.

What ever I do I always get the same format... Monday, 13 June, 2009 00:00:00 (in red is where I am trying to format my date)

Plus I want to move the time to the next line. Any help? (I re-enter the javascript code only)

<script type="text/javascript">

var weekdaystxt=["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

function showLocalTime(container, servermode, offsetMinutes, displayversion){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.displayversion=displayversion
var servertimestring=(servermode=="server-php")? '<? print date ("D dS F Y H:i:s", time())?>' : (servermode=="server-ssi")? '<!--#config timefmt=" %a, %d %B %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
this.localtime=this.serverdate=new Date(servertimestring)
this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
this.updateTime()
this.updateContainer()
}

showLocalTime.prototype.updateTime=function(){
var thisobj=this
this.localtime.setSeconds(this.localtime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

showLocalTime.prototype.updateContainer=function(){
var thisobj=this
if (this.displayversion=="long")
this.container.innerHTML=this.localtime.toLocaleString()
else{
var hour=this.localtime.getHours()
var minutes=this.localtime.getMinutes()
var seconds=this.localtime.getSeconds()
var dayofweek=weekdaystxt[this.localtime.getDay()]
this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+"("+dayofweek+")"
}
setTimeout(function(){thisobj.updateContainer()}, 1000) //update container every second
}

function formatField(num, isHour){
if (typeof isHour!="undefined"){ //if this is the hour field
var hour=(num>24)? num-24 : num
return (hour==0)? 24 : hour
}
return (num<=9)? "0"+num : num//if this is minute or sec field
}

</script>

Adam · June 10, 2009

What have you actually tried? Your problem code is here I think:

<? print date ("D dS F Y H:i:s", time())?>

Read up on PHP's date() function to understand how you can change the format of the date.

Pavlos1316 · June 10, 2009

That's what I've been reading all day >:( What is there that I don't get?

I want the date to be displayed

Mon, June 13th 2009

00:00:00

What am I not see?

Adam · June 10, 2009

Probably need two date calls there, try this:

<?php print date("D, F jS Y") . '<br /><br />' . date("H:i:s"); ?>

Pavlos1316 · June 10, 2009

Nope... I get: NaN

The only thing I can think is that cause I am taking the server time, for some reason the script takes the server format also and doesn't accept anything else... (can this be possible...?)

Pavlos1316 · June 10, 2009

When setting parameter 'long' (to show date and time)

Change

if (this.displayversion=="long")

this.container.innerHTML=this.localtime.toLocaleString()

with the time format you like ex

if (this.displayversion=="long")

this.container.innerHTML='<? print date('D, F jS Y')?>' (i needed only the date at first line)

when setting parameter 'short' (to show only time), play with this line to modify the time... Change

this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+"("+dayofweek+")"

with the time format you like ex

this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" (GMT +2)" (I didn't like am/pm but liked the GMT+2)

Sign In

[SOLVED] Date & Time

Recommended Posts

Pavlos1316

Link to comment

Share on other sites

Pavlos1316

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Pavlos1316

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Pavlos1316

Link to comment

Share on other sites

Pavlos1316

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information