Time Parser/Dropdown Combo

Update 18 Apr 2007 - Added Radix parameter to each instance of parseInt() pre John's comment.

Here it is, all 468 lines of code to create a dropdown list time parser combo box for the web. I don't have much time to document, so here's what you need to use it.

Add the following files to the head section of your web page.

<script type="text/javascript" src="js/events.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/timeparse.js"></script>

Be sure that events.js is at the top. Add the following CSS.

<style type="text/css">
/* inside text box drop down button */
a.tmsel:link, a.tmsel:active, a.tmsel:visited {
	text-decoration: none;
	position: absolute;
	text-indent: -10000px;
	padding: 0;
	width: 16px;
	height: 18px;
	margin: 2px 0 0 -19px;
	background: url(images/dropdown.gif) no-repeat 0 1px;
	line-height: 18px;
a.tmsel:hover {
	background-position: 0 -17px;

/* hacks for IE to make the dropdown button vertically centered */
* html a.tmsel:link, * html a.tmsel:active, * html a.tmsel:visited {
	margin: 3px 0 0 -19px;


Create an input field with a class name of "timeparse", and you're done.

<input type="text" name="timefield" id="timefield" size="11" class="timeparse">

Samples and Download

Related Articles


Gravatar Image1. Posted at 10/12/2006 8:01:43 by Mike Eger

I came across your website and have read most of your articles on your website. I particular like your solution to the Time Drop Down box. I was able to make some changes and quickly reuse this code, but was not sure if there were any license agreements that I need to post or comply with or if this is a blog designed for developers to share their solutions?

Thanks for sharing your ideas!

-- Mike

Gravatar Image2. Posted at 10/12/2006 12:49:30 by steve garland

Nice control but if I put in 09:15AM and hit the tab key it goes to 12:15AM

Gravatar Image3. Posted at 01/21/2007 3:45:56 by Claudio

I live in Italy, your DatePicker use localization for days and month naming's ?

Thank you for your effort, it's is very good and simple.



Gravatar Image4. Posted at 01/21/2007 13:38:10 by Tanny O'Haley

Hi Claudio,

There is no internationalization of month or day text. You can modify the text on lines 59 and 60 of the calpopup.js file.

this.daysOfWeek = "Sun Mon Tue Wed Thu Fri Sat".split(" ");
this.months = "January February March April May June July August September October November December".split(" ");

Tanny O'Haley

Gravatar Image5. Posted at 04/18/2007 20:19:16 by john g

This is too cool to leave alone - had to get to the bottom of this annoying 09:15 AM -> TAB-> 12:15 AM bug...

The getStringTime function in timeparse.js calls parseInt without the optional radix parameter (line 374).

Syntax is parseInt(string, radix).

Values beginning in zero ("01","02",.."09") will be treated as octal values if you omit the radix parameter. Just specify a radix of 10 to keep things decimal. eg, replace:

var iTemp = parseInt(values[index]);


var iTemp = parseInt(values[index],10);

note: will need to replace "index" with "i" in actual code.



Gravatar Image6. Posted at 04/18/2007 21:31:07 by Tanny O'Haley

Hi John,

Wow, great find! I love it when people not only find a bug but the fix too. As well as line 374 I also wasn't using the radix parameter for parseInt() on lines 266, 413 and 419. I've modified the code to use the radix parameter on all lines that use parseInt().

Thank you,

Tanny O'Haley

Gravatar Image7. Posted at 05/31/2008 14:34:07 by xxcemil

about css parameters

{ Link }

Gravatar Image8. Posted at 06/12/2008 11:27:10 by html-dersi

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

Add a comment

Discussion for this entry is now closed.