Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Military Time Conversion 1

Status
Not open for further replies.
sfalin

sfalin

Technical User
Aug 14, 2001
72
US
I have been asked to create a small app to allow a user to input a time in military format (ex. 1323) and then show the standard time depending on a certain time zone selected in a drop-down. A proprietary call tracking system currently displays military time for the Central time zone. My company is in the Eastern time zone and for some reason, a few people are having a hard time figuring out the conversion for the different time zones.

This is the way I envision it:
The user enters "1423" (2:23 PM CT) in a text box, then selects "Mountain" from the TimeZone dropdown. The standard time of 1:23 PM would then display in a another text box (or just standard text for that matter).

Now, I have little or no experience with Java; so, any help you can give would be really appreciated.
 
Sort by date Sort by votes
this should get you started:

Code: 
<html>
	<head>
		<title>test</title>
		
		<script type="text/javascript">
			function convert24to12(s) {
				var tzo = parseInt(self.TZO - getCurrentTimezone(), 10);
				var h = parseInt(s.substring(0,2), 10) + tzo;
				var m = s.substring(2);
				
				if (parseInt(h, 10) > 12) h -= 12;
				
				return h + ":" + m;
			}
			
			window.onload = function initTimezone() {
				self.TZO = new Date().getTimezoneOffset() / 60;
				var sel = document.forms[0].timezone;
				
				for (var x = 0; x < sel.options.length; x++) {
					if (sel.options[x].value == TZO) {
						sel.selectedIndex = x;
						break;
					}
				}
			}
			
			function getCurrentTimezone() {
				return document.forms[0].timezone.options[
					document.forms[0].timezone.selectedIndex].value;
			}
		</script>
	</head>

	<body>
		<form>
			24h: <input type="text" name="time1" value="1345"/>
			<p/>
			<input
				type="button"
				value="convert"
				name="btnConvert"
				onclick="this.form.time2.value = convert24to12(this.form.time1.value);" />
			<p/>
			12h: <input type="text" name="time2" />
			<p/>
			current timezone:  GMT - 
			<script type="text/javascript">
			document.write( new Date().getTimezoneOffset() / 60 );
			</script> hours
			<p/>
			<select name="timezone" onchange="this.form.btnConvert.click();">
				<option value="10">Hawaii</option>
				<option value="9">Alaska</option>
				<option value="8">Pacific</option>
				<option value="7">Mountain</option>
				<option value="6">Central</option>
				<option value="5">Eastern</option>
				<option value="4">Atlantic</option>
			</select>
		</form>
	</body>
</html>

=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); }
 
Upvote 0 Downvote
That looks like it might just be exactly what I need.

I've been trying to play with some of the settings to have the default time zone be Central, even though mine is Eastern, but can't seem to figure it out. Central time needs to be my starting point and the others need to compute from there.

If I enter 1455 in the 24h field, 12h should read as 2:55, with Central as timezone. If I change timezone to Eastern, the 12h field should be 3:55.

Any ideas?
 
Upvote 0 Downvote
changing initTimezone() to this should do it:
Code: 
window.onload = function initTimezone() {
		self.TZO = new Date().getTimezoneOffset() / 60;
		var sel = document.forms[0].timezone;

		var ZONES = new Array();
		ZONES["Hawaii"] = 10;
		ZONES["Alaska"] = 9;
		ZONES["Pacific"] = 8;
		ZONES["Mountain"] = 7;
		ZONES["Central"] = 6;
		ZONES["Eastern"] = 5;
		ZONES["Atlantic"] = 4;

		for (var x = 0; x < sel.options.length; x++) {
				if (sel.options[x].value == ZONES["Central"]) {
						sel.selectedIndex = x;
						break;
				}
		}
}

=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); }
 
Upvote 0 Downvote
That changes the default, but the 12hr still converts as Eastern.

Thanks so much for helping me with this. I see stars in your future. You're the bomb!!
 
Upvote 0 Downvote
i think i realized what you were after right after my head hit the pillow last night...try this:

Code: 
window.onload = function initTimezone() {
	var ZONES = new Array();
	ZONES["Hawaii"] = 10;
	ZONES["Alaska"] = 9;
	ZONES["Pacific"] = 8;
	ZONES["Mountain"] = 7;
	ZONES["Central"] = 6;
	ZONES["Eastern"] = 5;
	ZONES["Atlantic"] = 4;

	self.TZO = ZONES["Central"];
	var sel = document.forms[0].timezone;

	for (var x = 0; x < sel.options.length; x++) {
		if (sel.options[x].value == TZO) {
			sel.selectedIndex = x;
			break;
		}
	}
}

=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); }
 
Upvote 0 Downvote
We're getting close. Now, when I try to change the timezone dropdown to a different zone, I get an error: "Object doesn't suport this property or method" on Line 61.

Here's my page:
Code: 
<html> 
    <head> 
        <title>Time Zone Converter</title> 
	<STYLE>
		TD {font-family:arial; font-size:11pt; color:navy; font-weight:bold}
		.i1 {font-family:arial; font-size:11pt; color:black; font-weight:bold; background:#B9D3EE; vertical-align:middle; text-align:center}
		.s1 {font-family:arial; font-size:11pt; color:black; background:#B9D3EE; vertical-align:middle}
		.s2 {font-family:arial; font-size:12pt; color:black; font-weight:bold; background:#B9D3EE; text-align:center; vertical-align:middle}
		.s3 {font-family:arial; font-size:10pt; color:black; font-weight:bold; vertical-align:middle}
		A {font-family:arial; font-size:11pt; vertical-align:middle; color:navy}
		A:hover {font-family:arial; font-size:11pt; vertical-align:middle; color:navy; background:#B9D3EE; text-decoration:overline underline}
	</STYLE>


        
        <script type="text/javascript"> 
            function convert24to12(s) { 
                var tzo = parseInt(self.TZO - getCurrentTimezone(), 10); 
                var h = parseInt(s.substring(0,2), 10) + tzo; 
                var m = s.substring(2); 
                
                if (parseInt(h, 10) > 12) h -= 12; 
                
                return h + ":" + m; 
            } 
            
window.onload = function initTimezone() {
    var ZONES = new Array();
    ZONES["Hawaii"] = 10;
    ZONES["Alaska"] = 9;
    ZONES["Pacific"] = 8;
    ZONES["Mountain"] = 7;
    ZONES["Central"] = 6;
    ZONES["Eastern"] = 5;
    ZONES["Atlantic"] = 4;

    self.TZO = ZONES["Central"];
    var sel = document.forms[0].timezone;
        self.focus();document.tzc.time1.focus();
        show2();

    for (var x = 0; x < sel.options.length; x++) {
        if (sel.options[x].value == TZO) {
            sel.selectedIndex = x;
            break;
        }
    }
}

            function getCurrentTimezone() { 
                return document.forms[0].timezone.options[ 
                    document.forms[0].timezone.selectedIndex].value; 
            } 
        </script> 
    </head> 

    <body> 
<TABLE WIDTH=300 HEIGHT=100% CELLPADDING=0 CELLSPACING=0 BORDER=0><TR VALIGN=top><TD VALIGN=top>
<TABLE WIDTH=300 CELLPADDING=0 CELLSPACING=0 BORDER=1 BORDERCOLOR="lightsteelblue"><TR VALIGN=top><TD VALIGN=top>
        <DIV ALIGN=left STYLE="margin-top:5px; margin-left:20px"><form NAME="tzc"> 
	ACLAIM Time: </DIV>
            <DIV ALIGN=center><input CLASS="i1" type="text" SIZE="5" name="time1" value=""/> &nbsp; <select CLASS="s1" name="timezone" onchange="this.form.btnConvert.Click();">

                <option value="10">Hawaii</option> 
                <option value="9">Alaska</option> 
                <option value="8">Pacific</option> 
                <option value="7">Mountain</option> 
                <option value="6">Central</option> 
                <option value="5">Eastern</option> 
                <option value="4">Atlantic</option> 
            </select> &nbsp; <input type="button" CLASS="s3" value="Convert" name="btnConvert" onClick="this.form.time2.value = convert24to12(this.form.time1.value);" /></DIV>
            <p/> 
	<DIV STYLE="background:lightsteelblue; padding:4px" ALIGN=center>Converted Time: <input CLASS="s2" type="text" SIZE="10" name="time2" /></DIV></TD></TR></TABLE>
        </form> 
</TD></TR><TR VALIGN=bottom><TD>
<TABLE WIDTH=300 BORDER=0 CELLPADDING=2 CELLSPACING=0><TR>
	<TD WIDTH=150><A HREF="/usac/Training/misc/timezones.htm" TARGET="main">Time Zone Map</A></TD>
	<TD WIDTH=150 ALIGN=right>
<span id=tick2>
</span>

<script>
<!--

/*By JavaScript Kit
[URL unfurl="true"]http://javascriptkit.com[/URL]
Credit MUST stay intact for use
*/

function show2(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("tick2"): document.all.tick2
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="pm"
if (hours<12)
dn="am"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML="<b style='font-size:11pt;font-family:arial;color:black;'>"+ctime+" ET</b>"
setTimeout("show2()",1000)
}
//-->
</script>
</TD>
</TR></TABLE>
    </body> 
</html>
 
Upvote 0 Downvote
You ARE the man. Works PERFECTLY!! Thanks a million and a star to you.
 
Upvote 0 Downvote
Would it be possible to add the appropriate AM/PM indicator to time2 once the conversion is made. I'm afraid it will cause confusion if, say, Central time is 1355 and the user needs to find Pacific time (it would be 11:55, but w/o the am/pm, I just know some will be confused).

Also, is there any way to allow hitting Enter after entering the military time in time1. This would reduce hand movements and save a little time for them.
 
Upvote 0 Downvote
here's your form tweaked with your changes in red:

Code: 
<html>
    <head>
        <title>Time Zone Converter</title>
    <STYLE>
        TD {font-family:arial; font-size:11pt; color:navy; font-weight:bold}
        .i1 {font-family:arial; font-size:11pt; color:black; font-weight:bold; background:#B9D3EE; vertical-align:middle; text-align:center}
        .s1 {font-family:arial; font-size:11pt; color:black; background:#B9D3EE; vertical-align:middle}
        .s2 {font-family:arial; font-size:12pt; color:black; font-weight:bold; background:#B9D3EE; text-align:center; vertical-align:middle}
        .s3 {font-family:arial; font-size:10pt; color:black; font-weight:bold; vertical-align:middle}
        A {font-family:arial; font-size:11pt; vertical-align:middle; color:navy}
        A:hover {font-family:arial; font-size:11pt; vertical-align:middle; color:navy; background:#B9D3EE; text-decoration:overline underline}
    </STYLE>


        
        <script type="text/javascript">
            function convert24to12(s) {
                var tzo = parseInt(self.TZO - getCurrentTimezone(), 10);
                var h = parseInt(s.substring(0,2), 10) + tzo;
                var m = s.substring(2);
                [b][red]var ampm = " AM";
                
                if (parseInt(h, 10) > 12) {
                  h -= 12;
                  ampm = " PM";
                }                
                
                return h + ":" + m + ampm;
            }
            
            function doConvert(f) {
              var s = f.time1.value;
              f.time2.value = convert24to12(s);
              return false;
            }[/red][/b]
            
window.onload = function initTimezone() {
    var ZONES = new Array();
    ZONES["Hawaii"] = 10;
    ZONES["Alaska"] = 9;
    ZONES["Pacific"] = 8;
    ZONES["Mountain"] = 7;
    ZONES["Central"] = 6;
    ZONES["Eastern"] = 5;
    ZONES["Atlantic"] = 4;

    self.TZO = ZONES["Central"];
    var sel = document.forms[0].timezone;
        self.focus();document.tzc.time1.focus();
        show2();

    for (var x = 0; x < sel.options.length; x++) {
        if (sel.options[x].value == TZO) {
            sel.selectedIndex = x;
            break;
        }
    }
}

            function getCurrentTimezone() {
                return document.forms[0].timezone.options[
                    document.forms[0].timezone.selectedIndex].value;
            }
        </script>
    </head>

    <body>
<TABLE WIDTH=300 HEIGHT=100% CELLPADDING=0 CELLSPACING=0 BORDER=0><TR VALIGN=top><TD VALIGN=top>
<TABLE WIDTH=300 CELLPADDING=0 CELLSPACING=0 BORDER=1 BORDERCOLOR="lightsteelblue"><TR VALIGN=top><TD VALIGN=top>
        <DIV ALIGN=left STYLE="margin-top:5px; margin-left:20px"><form NAME="tzc"[b][red] onsubmit="return doConvert(this);"[/red][/b]>
    ACLAIM Time: </DIV>
            <DIV ALIGN=center><input CLASS="i1" type="text" SIZE="5" name="time1" value=""/> &nbsp; <select CLASS="s1" name="timezone" onchange=[b][red]"doConvert(this.form);">[/red][/b]

                <option value="10">Hawaii</option>
                <option value="9">Alaska</option>
                <option value="8">Pacific</option>
                <option value="7">Mountain</option>
                <option value="6">Central</option>
                <option value="5">Eastern</option>
                <option value="4">Atlantic</option>
            </select> &nbsp; <input [b][red]type="submit"[/red][/b] CLASS="s3" value="Convert" name="btnConvert"[b][red] onclick=""/[/red][/b]></DIV>
            <p/>
    <DIV STYLE="background:lightsteelblue; padding:4px" ALIGN=center>Converted Time: <input CLASS="s2" type="text" SIZE="10" name="time2" /></DIV></TD></TR></TABLE>
        </form>
</TD></TR><TR VALIGN=bottom><TD>
<TABLE WIDTH=300 BORDER=0 CELLPADDING=2 CELLSPACING=0><TR>
    <TD WIDTH=150><A HREF="/usac/Training/misc/timezones.htm" TARGET="main">Time Zone Map</A></TD>
    <TD WIDTH=150 ALIGN=right>
<span id=tick2>
</span>

<script>
<!--

/*By JavaScript Kit
[URL unfurl="true"]http://javascriptkit.com[/URL]
Credit MUST stay intact for use
*/

function show2(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("tick2"): document.all.tick2
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="pm"
if (hours<12)
dn="am"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML="<b style='font-size:11pt;font-family:arial;color:black;'>"+ctime+" ET</b>"
setTimeout("show2()",1000)
}
//-->
</script>
</TD>
</TR></TABLE>
    </body>
</html>

=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); }
 
Upvote 0 Downvote
Beautiful!! Works like a dream. Have another star.
 
Upvote 0 Downvote
Was just testing it and found that if I enter, say, 0155, all the earlier time zones show up with a negative number or zero.
 
Upvote 0 Downvote
hmm...i'm not an expert on military time, but see if this fixes it.

in convert24to12(), change
Code: 
                if (parseInt(h, 10) > 12) {
                  h -= 12;
                  ampm = " PM";
                }

to
Code: 
                if (parseInt(h, 10) > 12) {
                  h -= 12;
                  ampm = " PM";
                }
                else if (h < 0) {
                  h += 12;
                  ampm = " PM";
                }

=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); }
 
Upvote 0 Downvote
Getting real close now. Now if I enter an AM time (0255), all of the earlier times show up correctly, except when it is displayed as 12 am - it shows up as 0.
 
Upvote 0 Downvote
ok, then make that last change:
Code: 
                if (parseInt(h, 10) > 12) {
                  h -= 12;
                  ampm = " PM";
                }
                else if (h < 1) {
                  h += 12;
                  
                  if (h != 12) {
                    ampm = " PM";
                  }
                }

=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); }
 
Upvote 0 Downvote
Somethings not right now. I get "Undefined" in the time2 box.

Here's the whole code with your updates so you can see what I mean. Also, I had to add another } to the code you just gave.

Code: 
<html>
    <head>
        <title>Time Zone Converter</title>
    <STYLE>
        TD {font-family:arial; font-size:11pt; color:navy; font-weight:bold}
        .i1 {font-family:arial; font-size:11pt; color:black; font-weight:bold; background:#B9D3EE; vertical-align:middle; text-align:center}
        .s1 {font-family:arial; font-size:11pt; color:black; background:#B9D3EE; vertical-align:middle}
        .s2 {font-family:arial; font-size:12pt; color:black; font-weight:bold; background:#B9D3EE; text-align:center; vertical-align:middle}
        .s3 {font-family:arial; font-size:10pt; color:black; font-weight:bold; vertical-align:middle}
        A {font-family:arial; font-size:11pt; vertical-align:middle; color:navy}
        A:hover {font-family:arial; font-size:11pt; vertical-align:middle; color:navy; background:#B9D3EE; text-decoration:overline underline}
    </STYLE>


        
        <script type="text/javascript">
            function convert24to12(s) {
                var tzo = parseInt(self.TZO - getCurrentTimezone(), 10);
                var h = parseInt(s.substring(0,2), 10) + tzo;
                var m = s.substring(2);
                var ampm = " AM";
                
                if (parseInt(h, 10) > 12) {
                  h -= 12;
                  ampm = " PM";
                }
                else if (h < 1) {
                  h += 12;
                  
                  if (h != 12) {
                    ampm = " PM";
                  }
                }
		}

            
            function doConvert(f) {
              var s = f.time1.value;
              f.time2.value = convert24to12(s);
              return false;
            }
            
window.onload = function initTimezone() {
    var ZONES = new Array();
    ZONES["Hawaii"] = 10;
    ZONES["Alaska"] = 9;
    ZONES["Pacific"] = 8;
    ZONES["Mountain"] = 7;
    ZONES["Central"] = 6;
    ZONES["Eastern"] = 5;
    ZONES["Atlantic"] = 4;

    self.TZO = ZONES["Central"];
    var sel = document.forms[0].timezone;
        self.focus();document.tzc.time1.focus();
        show2();

    for (var x = 0; x < sel.options.length; x++) {
        if (sel.options[x].value == TZO) {
            sel.selectedIndex = x;
            break;
        }
    }
}

            function getCurrentTimezone() {
                return document.forms[0].timezone.options[
                    document.forms[0].timezone.selectedIndex].value;
            }
        </script>
    </head>

    <body>
<TABLE WIDTH=300 HEIGHT=100% CELLPADDING=0 CELLSPACING=0 BORDER=0><TR VALIGN=top><TD VALIGN=top>
<TABLE WIDTH=300 CELLPADDING=0 CELLSPACING=0 BORDER=1 BORDERCOLOR="lightsteelblue"><TR VALIGN=top><TD VALIGN=top>
        <DIV ALIGN=left STYLE="margin-top:5px; margin-left:20px"><form NAME="tzc" onsubmit="return doConvert(this);">
    ACLAIM Time: </DIV>
            <DIV ALIGN=center><input CLASS="i1" type="text" SIZE="5" name="time1" value=""/> &nbsp; <select CLASS="s1" name="timezone" onchange="doConvert(this.form);">

                <option value="10">Hawaii</option>
                <option value="9">Alaska</option>
                <option value="8">Pacific</option>
                <option value="7">Mountain</option>
                <option value="6">Central</option>
                <option value="5">Eastern</option>
                <option value="4">Atlantic</option>
            </select> &nbsp; <input type="submit" CLASS="s3" value="Convert" name="btnConvert" onclick=""/></DIV>
            <p/>
    <DIV STYLE="background:lightsteelblue; padding:4px" ALIGN=center>Converted Time: <input CLASS="s2" type="text" SIZE="10" name="time2" /></DIV></TD></TR></TABLE>
        </form>
</TD></TR><TR VALIGN=bottom><TD>
<TABLE WIDTH=300 BORDER=0 CELLPADDING=2 CELLSPACING=0><TR>
    <TD WIDTH=150><A HREF="/usac/Training/misc/timezones.htm" TARGET="main">Time Zone Map</A></TD>
    <TD WIDTH=150 ALIGN=right>
<span id=tick2>
</span>

<script>
<!--

/*By JavaScript Kit
[URL unfurl="true"]http://javascriptkit.com[/URL]
Credit MUST stay intact for use
*/

function show2(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("tick2"): document.all.tick2
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="pm"
if (hours<12)
dn="am"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML="<b style='font-size:11pt;font-family:arial;color:black;'>"+ctime+" ET</b>"
setTimeout("show2()",1000)
}
//-->
</script>
</TD>
</TR></TABLE>
    </body>
</html>
 
Upvote 0 Downvote
looks like you lost the "return" statement in convert24to12()

i went and fixed a few other bugs i noticed, such as when entering "1345" and then switching to Pacific, it was still showing PM instead of AM

here's the corrected function:
Code: 
            function convert24to12(s) {
                var tzo = parseInt(self.TZO - getCurrentTimezone(), 10);
                var h = parseInt(s.substring(0,2), 10) + tzo;
                var m = s.substring(2);
                
                var ampm = h < 12 ? " AM" : " PM";
                
                if (parseInt(h, 10) > 12) {
                  h -= 12;
                }
                else if (h < 1) {
                  h += 12;
                  
                  if (h < 12) {
                    ampm = " PM";
                  }
                }
                
                return h + ":" + m + ampm;
            }

=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); }
 
Upvote 0 Downvote
Beautiful!! It all works perfectly. Thanks so much for your help.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
267
trevil620
trevil620
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
334
xwb
xwb
evr72
  • Locked
  • Question
time stamp
Replies
0
Views
37
evr72
evr72
axLW
  • Locked
  • Question
Check if date is BST or GMT, timezone help
Replies
12
Views
244
axLW
axLW
FireGeek21
  • Locked
  • Question
Check if time is in a range
Replies
1
Views
44
jpadie
jpadie

Part and Inventory Search

Sponsor

Back
Top