Share your coding samples or ask questions

Question JavaScript time picker with auto increment while mouse down

More
13 years 5 months ago - 9 years 2 months ago #33 by roller
JavaScript time picker with auto increment while mouse down

If you want a simple time picker that auto increments while the mouse is held down then this one is for you. Incrementing a text box on an HTML page using JavaScript is simple enough but making it auto increment while you hold the mouse down requires few more lines of code.

I will go thru this entire tutorial with you step by step, first create a HTML document like this:

<html>
<head>
</head>
<body>
</body>
</html>

Next add the below JavaScript between the head tags:

<script language="javascript">
function timePicker(myTxt, inc, max, min, s) {
if (s == "+"){myTxt.value = parseInt(myTxt.value) + inc} else {myTxt.value = parseInt(myTxt.value) inc};
if (myTxt.value == max+inc) {myTxt.value = min} else if (myTxt.value == min-inc) {myTxt.value = max};
var callbackFunction = function() {
if(mouseDown==1){if (s == "+"){myTxt.value = parseInt(myTxt.value) + inc} else {myTxt.value = parseInt(myTxt.value) - inc};
window.setTimeout(callbackFunction, 250);
}
if (myTxt.value == max+inc) {myTxt.value = min} else if (myTxt.value == min-inc) {myTxt.value = max};
}
window.setTimeout(callbackFunction, 1000);

}

var mouseDown = 0;
document.onmousedown = function() {
mouseDown = 1;
}

document.onmouseup = function() {
mouseDown = 0;
}

</script>

The above JavaScript contain a main function that does most of the work and two other functions that keep track of the mouse down and mouse up states.

Now add a textbox and a + and – letters and assign their onmousedown event to our JavaScript function timePicker() like this:

<input type="text" name="hour" value="12" >
<font onmousedown="timePicker(myform.hour,1,23,0, '-')" unselectable="on" size="5px">-</font>

The timePicker function takes 5 arguments, function timePicker(myTxt, inc, max, min, s). myTxt a reference to the text box name, inc is the increment, max and min are the counter top and bottom limit and s for sign + or -.

Now the best way to see the entire example working is to copy the entire HTML page below and run it in a browser, the below page has some additional stuff like a table layout and some styling:

<html>

<head>
<!-- written by Edgar Badawy fracta.net -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Javascript Time Picker auto increment while mousedown</title>
<script language="javascript">

function timePicker(myTxt, inc, max, min, s) {
if (s == "+"){myTxt.value = parseInt(myTxt.value) + inc} else {myTxt.value = parseInt(myTxt.value) - inc};
if (myTxt.value == max+inc) {myTxt.value = min} else if (myTxt.value == min-inc) {myTxt.value = max};
var callbackFunction = function() {
if(mouseDown==1){if (s == "+"){myTxt.value = parseInt(myTxt.value) + inc} else {myTxt.value = parseInt(myTxt.value) - inc};
window.setTimeout(callbackFunction, 250);
}
if (myTxt.value == max+inc) {myTxt.value = min} else if (myTxt.value == min-inc) {myTxt.value = max};
}
window.setTimeout(callbackFunction, 1000);

}

var mouseDown = 0;
document.onmousedown = function() {
mouseDown = 1;
}

document.onmouseup = function() {
mouseDown = 0;
}

</script>

</head>

<body>
<style type="text/css">
.txt{
margin-bottom:40px; width: 50px; height: 50px; font-size:40px; color:#00ff00; vertical-align:middle; font-weight:bold;
}

.tbl{
background-color:#a0a0a0; height: 20px; width: 10px; border:1px solid #000000;
}
</style>

<table border="0" cellpadding="0" cellspacing="0" width="1129" height="306">
<tr>
<td valign="top">
</td>
<td valign="top" height="42">
Javascript Time Picker written by<a href=" fracta.net "> Edgar Badawy fracta.net
</tr>
<tr>
<td valign="top" width="194">

</td>
<td valign="top" height="264" width="935">

<form name="myform" method="POST" action=""
<br>
Select time - 1 minute increments - auto increment while mouse is down
<br>
<input class="txt" type="text" name="hour" value="12" >

<table style="display:inline; margin-right:20px"; cellspacing="0" cellpadding="0">
<tr>
<td class="tbl"><font onmousedown="timePicker(myform.hour,1,23,0, '+')" unselectable="on" size="5px">+</font></td>
</tr>
<tr>
<td class="tbl"><font onmousedown="timePicker(myform.hour,1,23,0, '-')" unselectable="on" size="5px">-</font></td>
</tr>
</table>


<input class="txt" type="text" name="minutes" value="0" size="2" >
<table style="display:inline;" cellspacing="0" cellpadding="0">

<tr>
<td class="tbl"><font onmousedown="timePicker(myform.minutes,1,59,0,'+')" unselectable="on" size="5px">+</font></td>
</tr>
<tr>
<td class="tbl"><font onmousedown="timePicker(myform.minutes,1,59,0,'-')" unselectable="on" size="5px">-</font></td>
</tr>
</table>
<br>
<br>
Select time - 15 minutes increments - auto increment while mouse is down

<br>
<input class="txt" type="text" name="hour2" value="12" size="2" >

<table style="display:inline; background-color:#cfcfcf; margin-bottom:-5px; margin-right:20px" cellspacing="0" cellpadding="0">
<!-- MSTableType="nolayout" -->
<tr>
<td class="tbl" ><font onmousedown="timePicker(myform.hour2,1,23,0,'+')" unselectable="on" size="5px">+</font></td>
</tr>
<tr>
<td class="tbl" ><font onmousedown="timePicker(myform.hour2,1,23,0,'-')" unselectable="on" size="5px">-</font></td>
</tr>
</table>


<input class="txt" type="text" name="minutes2" value="0" size="2" >
<table style="display:inline; background-color:#cfcfcf; margin-bottom:-5px" cellspacing="0" cellpadding="0">
<!-- MSTableType="nolayout" -->
<tr>
<td class="tbl"> <font onmousedown="timePicker(myform.minutes2,15,45,0,'+')" unselectable="on" size="5px">+</font></td>
</tr>
<tr>
<td class="tbl"> <font onmousedown="timePicker(myform.minutes2,15,45,0,'-')" unselectable="on" size="5px">-</font></td>
</tr>
</table>
<br>


</td>
</tr>
</table>

</body>

</html>

The above code will display two time pickers, the first demonstrates the time picker with 1 minute Increments and the second with 15 minutes Increments.

The time picker will wait 1 second with the mouse pressed down before starting to auto increment.

To view a working demo click here
Last edit: 9 years 2 months ago by roller.

Please Log in or Create an account to join the conversation.

Time to create page: 0.713 seconds
Powered by Kunena Forum