Time Picker

**ritesh_sail** · 09-06-2008, 03:43 PM

Hi All,

I need one time picker web control which will be displayed on my JSP and will make it easy for the users to enter the time.

The control must some what look like this

the same as we see in windows time
Thanks
Ritesh Sail

**magicyte** · 09-06-2008, 04:24 PM

I have advice: use css to make those up/down buttons, and then use javascript to do the rest.

-magicyte

**jscheuer1** · 09-06-2008, 06:37 PM

Due to browser limitations, as far as available monospace fonts and the ability to control buttons with style goes, here is about the best you will get unless you use all images for both the numbers and the buttons:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/* Time Picker ©2008 John Davenport Scheuer
   As first seen in http://www.dynamicdrive.com/forums/
   username:jscheuer1 - This notice must remain for legal use
   */

function timepicker(){
var d = new Date();
d.setHours(d.getHours() + timepicker.h);
var p = function(n){return ':' + (n < 10? '0' + n : n);},
h = d.getHours(),
m = p(d.getMinutes()),
s = p(d.getSeconds()),
ampm = h >= 12? 'PM' : 'AM';
h = h%12 || 12;
h = h < 10? '\xa0' + h : h;
document.forms[0].elements['timepick'].value = h + m + s + ampm;
timepicker.timer = setTimeout(timepicker, 1000);
};
timepicker.h = 0;
timepicker.updown = function(n){
clearTimeout(timepicker.timer);
timepicker.h += n;
timepicker();
};
window.onload = timepicker;
</script>
</head>
<body>
<form action="#">
<div>
<input style="font-family:monospace;" size=11 type="text" name="timepick">
<input type="button" value="/\" onclick="timepicker.updown(1);">
<input type="button" value="\/" onclick="timepicker.updown(-1);">
</div>
</form>
</body>
</html>

As a side note, Windows Time has available to it fonts and buttons programed into the UI, ones (in the case of buttons) not available in browsers. In the case of fonts, these may be made available in browsers, if the user installs them. Many, if not all of the most suitable fonts for this are not free, so must also be purchased by the user in order to be installed. This is why I suggest that, if you want it to look exactly like Windows Time, use images.

**magicyte** · 09-09-2008, 12:38 AM

Yeah. You could do that too. BTW, John, nice use of inheritance (so I would call it). Like your script. Really sophisticated. I could never had made one like that.

Where did you learn to program in JavaScript like that? You know, w/ classes 'n' such. I would love to learn from where.

-magicyte

**jscheuer1** · 09-09-2008, 02:54 AM

Originally Posted by magicyte

Yeah. You could do that too. BTW, John, nice use of inheritance (so I would call it). Like your script. Really sophisticated. I could never had made one like that.

Where did you learn to program in JavaScript like that? You know, w/ classes 'n' such. I would love to learn from where.

-magicyte

IDK, it's something I picked up as I went along. The main concept that enables what you are calling 'inheritance' is the fact that any given function (in this case the timepicker function) is an object. As such, it may have properties. In javascript properties may be assigned to an existing object in a few ways. The object.property = something convention is just convenient in this case.

**magicyte** · 09-09-2008, 10:15 PM

Yeah. I find it amazing that you can put a function in a variable! The first time I saw that happen, I was COMPLETELY amazed.

-magicyte

**Nile** · 09-10-2008, 12:29 AM

Thats how you make functions.

Code:

var _ = function(obj){ return document.getElementById(obj); };
_("myDiv").innerHTML = "Hi";

**jscheuer1** · 09-10-2008, 04:15 AM

Originally Posted by Nile

Thats how you make functions.

Code:

var _ = function(obj){ return document.getElementById(obj); };
_("myDiv").innerHTML = "Hi";

That's a little different than what I'm talking about. In the above quoted case, you are setting a generic property of the object returned by the function. In my code that magicyte was commenting upon I am creating properties and attaching them to the function itself as an object. This is cool because these invented properties, though not in the global scope, can be accessed globally as properties of the function object which is in the global scope.

Thread: Time Picker

Thread Tools

Search Thread

Time Picker

The Following User Says Thank You to magicyte For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions