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;
</style>
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">
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
Nice control but if I put in 09:15AM and hit the tab key it goes to 12:15AM
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.
Bye
Claudio
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
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]);
with..
var iTemp = parseInt(values[index],10);
note: will need to replace "index" with "i" in actual code.
cheers,
jg
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
about css parameters
{ Link }
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