PDA

View Full Version : 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
http://img222.imageshack.us/img222/9233/timepickerhm6.png (http://imageshack.us)

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:


<!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 :):D

jscheuer1
09-09-2008, 02:54 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 :):D

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.


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

jscheuer1
09-10-2008, 04:15 AM
Thats how you make functions.


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.