Skip to content

Internet Explorer oddity when referencing strings in Javascript

September 4, 2010

I came across an interesting quirk about Internet Explorer the other day.  A customer of ours said they were having trouble with a certain page of our application.  After some investigation, I narrowed it down to these lines of code:

var firstWhen = "09:12 PM"; // Added this beginning variable for simplicity
var timeParts = firstWhen.split(" ");
var amPm = timeParts[1];
var timePart = timeParts[0];
var hourAndMinute = timePart.split(":");
var hour = hourAndMinute[0];
if (hour[0] == "0")
{
hour = hour[1];
}
var minute = hourAndMinute[1];
if (amPm.search(/pm/i) >= 0)
{
hour = parseInt(hour) + 12;
if (hour == 24)
{
hour = 12;
}
}
else
{
if (hour == 12)
{
hour = 0;
}
}

This snippet of code converts a string of time from standard 12-hour format to military or 24 hour format. Seems simple enough and it works on all non-IE browsers (Chrome, Firefox and Safari).

The problem here is actually two parts. First, the IF statement starting with if (hour[0] == "0") should look at the first character of “hour” and if its the char “0”, then set hour to just the second character. Basically strip the “0” if its there. I’m not sure if this is a proper way to reference a string as an array of characters (this is actually not my code, but a co-workers), but it works on all modern browsers. And it makes sense in my head. But, of course, Internet Explorer doesn’t like it. So IE7 and IE8 skip this line and always return hour as “09” (in this example).

Now on to the second offending bit of code. The line hour = parseInt(hour) + 12; works only if hour does NOT start with a zero. If it does start with a zero, parseInt() assumes an octal value. So when IE returns “09” in this example, parseInt(“09”) returns null (09 is not a whole octal number). And hour gets set to 12 instead of 21 breaking the conversion.

So I implemented two code fixes here. First replace the IF statement with:

if (hour.charAt(0) == "0")
{
hour = hour.charAt(1);
}

This gets rid of the IE oddity. The second part is to pass the radix value to parseInt() since I am always in base 10:

hour = parseInt(hour, 10) + 12;

The second part isn’t necessary to fix the IE part, but its a good safeguard. It also makes the code a bit more readable.

It took me half a day to find this offending code, so I thought I would jog it down.

NOTE: I’m new to WordPress and the standard code formatting is terrible. Hopefully I can find a nice add-on to help. So I apologize for the bad spacing for now…

One Comment
  1. Katy Livingston permalink

    You have a blog?! Awesome. Count me in for reading the entries about dogs and life. The code…not so much. 🙂

Leave a comment