Changing the format in a global clock with date

I have a difficult problem with the changing of the format with many way in a global clock with date . Can someone help me?

<select name="city" onClick="">
<option value="0">Adelaide</option>
<option value="1">Anchorage</option>
<option value="2">Athens</option>
<option value="3">Baker Island</option>
<option value="4">Buenes Aires</option>
<option value="5">Caracas</option>
<option value="6">Chihuahua</option>
<option value="7">Denver</option>
<option value="8">Dhaka</option>
<option value="9">Dubai</option>
<option value="10">Gander</option>
<option value="11">Grytviken</option>
<option value="12">Honolulu</option>
<option value="13">Iles Marquises</option>
<option value="14">Kabul</option>
<option value="15">Karachi</option>
<option value="16">Katmandu</option>
<option value="17">Kingston, Norfolk Island</option>
<option value="18">London</option>
<option value="19">Lord Howe Island</option>
<option value="20">Magadan</option>
<option value="21">Manila</option>
<option value="22" selected="selected">Moscow</option>
<option value="23">Mumbai</option>
<option value="24">New York</option>
<option value="25">Paris</option>
<option value="26">Ponta Delgada</option>
<option value="27">Rangoon</option>
<option value="28">Rawaki</option>
<option value="29">Sambas</option>
<option value="30">Samoa</option>
<option value="31">Starbuck Island</option>
<option value="32">Sydney</option>
<option value="33">Tehran</option>
<option value="34">Tokyo</option>
<option value="35">Vancouver</option>
<option value="36">Wellington</option>
</select>
</fieldset>
<fieldset  class="field">
<legend><strong><em>Select the date</em></strong></legend>
<select name="Date" id="Date" onClick="">
<option value="a">28th March 2010</option>
<option value="b">28 March 2010</option>
<option value="c">28th Mar 2010</option>
<option value="d">28 Mar 2010</option>
<option value="e">28/03/2010</option>
<option value="f">28th March 10</option>
<option value="g">28 March 10</option>
<option value="h">28th Mar 10</option>
<option value="i">28 Mar 10</option>
<option value="j">28/03/10</option>
<option value="k">28th March</option>
<option value="l">28 March</option>
<option value="m">28th Mar</option>
<option value="o">28 Mar</option>
<option value="p">28/03</option>
</select>
</fieldset>
<fieldset  class="field">
<legend><strong><em>Select the day</em></strong></legend>
<select name="day" id="day" onClick="">
<option value="f">Sunday</option>
<option value="s">Sun</option>
</select>
</fieldset>
<fieldset  class="field">
<legend><strong><em>Select the time</em></strong></legend>
<select name="time" id="time" onClick="">
<option value="a">5:28:12 am</option>
<option value="b">5:28 am</option>
<option value="c">5:28:12</option>
<option value="d">17:28:12</option>
<option value="e">17:28</option>
<option value="f">5:28</option>

Thanks.

I found it in this Dynamic Drive DHTML Scripts- Local Time script

What is the story behind what you are trying to do?

Select City, Date, Day(shouldn’t be needed), Time - then what?

Hello, the basic problem is to combine all, city,day,date,time for many countries and the user must change dynamic every part he want.I would like advise because is difficult.Thanks

Would toLocaleString be of some use? That way whatever date you supply is converted automatically to how the user has their environment set up.

Hello, I try this code but I do not think is usefull for my problem.Thanks.

<html>
<head>
<script type="text/javascript">
function getDate()
{
alert("getting date...");
var d = new Date();
var s = d.toLocaleString();
alert(s);
return s;
}
function setDate()
{
alert("Setting date");
document.getElementById("myDate").value = getDate();
}
</script>
</head>

<body>
<form name="form1">
Date: <input type="text" id="myDate" size="20" />
<br /><br />
<input type="button" value="Today's Date" onclick="setDate();">
</form>
</body>

</html>

Then I suspect that a way to format dates and times might be useful for you.
Date Format Method

I run this code in ssh(file transfer) and save as .html but was dead. Do you see any wrong;

<html>
<head>
<script type="text/javascript" src="dateformat.js">
var today = new Date();
document.getElementById('datetime').innerHTML = today.format('l, jS F Y h:i:sa P');
</script>

</head>


<body>
    <span id="datetime"></span>
	
</body>
</html>

Thanks.

These are a few of the major problems that you are facing.

  1. The script tag can either load from an external source, or it can interpret the code within the script tags. It can never to both at the same time though. Use one script tag to load the dateformat.js script, and a separate script tag for your own script code.

  2. When the script runs, nothing below it exists yet, so a script cannot manipulate any HTML elements if they come after the script. Either move the script to the end of the body, just before the </body> tag, or delay the running of the script until after the elements have loaded.

Hello, is something like that but difficult to me to combine and manipulate dynamic :

<html>
<body>
<?php

$date1=gmdate(" jS F Y ");
$date2=gmdate(" jS M Y ");
$date3=gmdate(" j M Y ");
$date4=gmdate(" j F Y ");
$date5=gmdate(" j n Y ");
$date6=gmdate(" jS F ");
$date7=gmdate(" jS M ");
$date8=gmdate(" j M  ");
$date9=gmdate(" j F  ");
$date10=gmdate(" j n  ");
$date11=gmdate(" jS F y ");
$date12=gmdate(" jS M y ");
$date13=gmdate(" j M  y ");
$date14=gmdate(" j F  y ");
$date15=gmdate(" j n  y ");
$date16=gmdate(" H:i:s ");
$date17=gmdate(" g:i:s ");
$date18=gmdate(" g:i:s a ");
$date19=gmdate(" g:i ");
$date20=gmdate(" H:i ");
$date21=gmdate(" g:i a ");
?>
<input type ="text" id="date1" size="30" value="<?php echo $date1 ?>"/><br/>
<input type ="text" id="date2" size="30" value="<?php echo $date2 ?>"/><br/>
<input type ="text" id="date3" size="30" value="<?php echo $date3 ?>"/><br/>
<input type ="text" id="date4" size="30" value="<?php echo $date4 ?>"/><br/>
<input type ="text" id="date5" size="30" value="<?php echo $date5 ?>"/><br/>
<input type ="text" id="date6" size="30" value="<?php echo $date6 ?>"/><br/>
<input type ="text" id="date7" size="30" value="<?php echo $date7 ?>"/><br/>
<input type ="text" id="date8" size="30" value="<?php echo $date8 ?>"/><br/>
<input type ="text" id="date9" size="30" value="<?php echo $date9 ?>"/><br/>
<input type ="text" id="date10" size="30" value="<?php echo $date10 ?>"/><br/>
<input type ="text" id="date11" size="30" value="<?php echo $date11 ?>"/><br/>
<input type ="text" id="date12" size="30" value="<?php echo $date12 ?>"/><br/>
<input type ="text" id="date13" size="30" value="<?php echo $date13 ?>"/><br/>
<input type ="text" id="date14" size="30" value="<?php echo $date14 ?>"/><br/>
<input type ="text" id="date15" size="30" value="<?php echo $date15 ?>"/><br/>
<input type ="text" id="date16" size="30" value="<?php echo $date16 ?>"/><br/>
<input type ="text" id="date17" size="30" value="<?php echo $date17 ?>"/><br/>
<input type ="text" id="date18" size="30" value="<?php echo $date18 ?>"/><br/>
<input type ="text" id="date19" size="30" value="<?php echo $date19 ?>"/><br/>
<input type ="text" id="date20" size="30" value="<?php echo $date20 ?>"/><br/>
<input type ="text" id="date21" size="30" value="<?php echo $date21 ?>"/><br/>


Since you’re using PHP, it’s much easier to perform date conversions from PHP than from javascript.

Hello, I find this code and I would like help to adapt to my script .

<script type="text/javascript">




var weekdaystxt=["Sun", "Mon", "Tues", "Wed", "Thurs", "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("F d, Y H:i:s", time())?>' : (servermode=="server-ssi")? '<!--#config timefmt="%B %d, %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 ampm=(hour>=12)? "PM" : "AM"
var dayofweek=weekdaystxt[this.localtime.getDay()]
this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+ampm+" ("+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>12)? num-12 : num
return (hour==0)? 12 : hour
}
return (num<=9)? "0"+num : num//if this is minute or sec field
}

</script>

Thanks

That script provides only a long and short form of the date to be displayed.


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 ampm=(hour>=12)? "PM" : "AM"
var dayofweek=weekdaystxt[this.localtime.getDay()]
this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+ampm+" ("+dayofweek+")"

It would be that last line where you focus your efforts. What you could do is to break the code it out to a separate function, to help you focus on converting the date it according to all of your chosen requirements.


function formatDate(localtime, displayversion) {
    var hour = localtime.getHours(),
        minutes = localtime.getMinutes(),
        seconds = localtime.getSeconds(),
        ampm = (hour >= 12) ? 'PM' : 'AM',
        weekdaystxt = ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
        dayofweek = weekdaystxt[localtime.getDay()];

    if (displayversion === 'long') {
        return localtime.toLocaleString();
    } else {
        return formatField(hour, 1) + ':' + formatField(minutes) + ':' + formatField(seconds) + ' ' + ampm + ' (' + dayofweek + ')';
    }
}

showLocalTime.prototype.updateContainer = function () {
    var thisobj=this;
    this.container.innerHTML = formatDate(this.localtime, this.displayversion);
    setTimeout(thisobj.updateContainer, 1000); //update container every second
}

Sorry ,I cannot understand your thoughts.Do you believe with that I can to solve my problem.Thanks.

Thanks , I solved the problem.