time picker in asp.net page

D

DotNetGuy

I have been programming in asp.net w/ vb for 3 years now and I feel a need
to include more client side script with javascript so here I am. Hopefully
in the right place. I have a timecard web app that I need to pick a starting
time in hour and minutes 3 times a day for 15 days. On the form I would like
to hit a button on Manday and popup an hour dropdown and minute dropdown and
submit them to the page without the page doing a postback. The minute
dropdown will only be every 15 minutes. Resulting in a textbox with
something like this > 14:30.
thanks in advance for any help offered
 
D

Danny

Not sure if it may be just me, but I don't see the JS part of it yet,
though I can see it has one, but I don't follow what interactivity is
needed or processed.


Danny
 
E

Evertjan.

Danny wrote on 04 dec 2005 in comp.lang.javascript:
Not sure if it may be just me, but I don't see the JS part of it yet,
though I can see it has one, but I don't follow what interactivity is
needed or processed.

No one of us sees anything
if you do not quote where you are talking about.

This is usenet.
 
L

Lee

DotNetGuy said:
I have been programming in asp.net w/ vb for 3 years now and I feel a need
to include more client side script with javascript so here I am. Hopefully
in the right place. I have a timecard web app that I need to pick a starting
time in hour and minutes 3 times a day for 15 days. On the form I would like
to hit a button on Manday and popup an hour dropdown and minute dropdown and
submit them to the page without the page doing a postback. The minute
dropdown will only be every 15 minutes. Resulting in a textbox with
something like this > 14:30.
thanks in advance for any help offered

Here's one way to do what I think you're asking for.
Note that it doesn't matter that this is an asp.net page.
The browser doesn't know or care how the page content was produced.
Note also that nothing is submitted and no new windows pop up.

<html>
<head>
<style type="text/css">
BUTTON {width:20em}
#timepicker {position:absolute;
top:50px;left:50px;
visibility:hidden;
border-style:solid;
border-width:1px;
background-color:wheat;
padding:2em;}
</style>
<script type="text/javascript">
function timepick(n) {
globalN=n;
document.getElementById("timepicker").style.visibility="visible";
}
function setTime(f) {
if(f) {
var HHMM=f.HH.options[f.HH.selectedIndex].text;
HHMM+=":"+f.MM.options[f.MM.selectedIndex].text;
document.getElementById("day"+globalN).innerHTML=HHMM;
}
document.getElementById("timepicker").style.visibility="hidden";
}
</script>
</head>
<body>
<button onclick="timepick(0)">Monday 2005-12-05</button>
<span id="day0" class="time">HH:MM</span><br>
<button onclick="timepick(1)">Tuesday 2005-12-06</button>
<span id="day1" class="time">HH:MM</span><br>
<button onclick="timepick(2)">Wednesday 2005-12-07</button>
<span id="day2" class="time">HH:MM</span><br>
</button>
<div id="timepicker">
<form>
<select name="HH">
<option>06</option>
<option>07</option>
<option selected>08</option>
</select>
<select name="MM">
<option selected>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select>
<br><br>
<input type="button" value="OK" onclick="setTime(this.form)">
<input type="button" value="Cancel" onclick="setTime(false)">
</form>
</div>
</body>
</html>
 
B

bg

Lee, this is perfect.
Note that I will have 14 days on thr form and a possible 3 in - outs for
each day.
Is there a way, or how can I make the picker float or move to the current
day button.
I am sure it it tied to " #timepicker {position:absolute;
top:50px;left:50px;".
thanks again,
dng

Lee said:
DotNetGuy said:
I have been programming in asp.net w/ vb for 3 years now and I feel a need
to include more client side script with javascript so here I am. Hopefully
in the right place. I have a timecard web app that I need to pick a
starting
time in hour and minutes 3 times a day for 15 days. On the form I would
like
to hit a button on Manday and popup an hour dropdown and minute dropdown
and
submit them to the page without the page doing a postback. The minute
dropdown will only be every 15 minutes. Resulting in a textbox with
something like this > 14:30.
thanks in advance for any help offered

Here's one way to do what I think you're asking for.
Note that it doesn't matter that this is an asp.net page.
The browser doesn't know or care how the page content was produced.
Note also that nothing is submitted and no new windows pop up.

<html>
<head>
<style type="text/css">
BUTTON {width:20em}
#timepicker {position:absolute;
top:50px;left:50px;
visibility:hidden;
border-style:solid;
border-width:1px;
background-color:wheat;
padding:2em;}
</style>
<script type="text/javascript">
function timepick(n) {
globalN=n;
document.getElementById("timepicker").style.visibility="visible";
}
function setTime(f) {
if(f) {
var HHMM=f.HH.options[f.HH.selectedIndex].text;
HHMM+=":"+f.MM.options[f.MM.selectedIndex].text;
document.getElementById("day"+globalN).innerHTML=HHMM;
}
document.getElementById("timepicker").style.visibility="hidden";
}
</script>
</head>
<body>
<button onclick="timepick(0)">Monday 2005-12-05</button>
<span id="day0" class="time">HH:MM</span><br>
<button onclick="timepick(1)">Tuesday 2005-12-06</button>
<span id="day1" class="time">HH:MM</span><br>
<button onclick="timepick(2)">Wednesday 2005-12-07</button>
<span id="day2" class="time">HH:MM</span><br>
</button>
<div id="timepicker">
<form>
<select name="HH">
<option>06</option>
<option>07</option>
<option selected>08</option>
</select>
<select name="MM">
<option selected>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select>
<br><br>
<input type="button" value="OK" onclick="setTime(this.form)">
<input type="button" value="Cancel" onclick="setTime(false)">
</form>
</div>
</body>
</html>
 
L

Lee

bg said:
Lee, this is perfect.
Note that I will have 14 days on thr form and a possible 3 in - outs for
each day.
Is there a way, or how can I make the picker float or move to the current
day button.
I am sure it it tied to " #timepicker {position:absolute;
top:50px;left:50px;".


Changes to timepick() definition and the places where it is called.
I don't fiddle with style attributes much, so this may not be optimal,
but it seems to work in IE and FireFox:

<html>
<head>
<style type="text/css">
BUTTON {width:20em}
#timepicker {position:absolute;
top:50px;left:50px;
visibility:hidden;
border-style:solid;
border-width:1px;
background-color:wheat;
padding:2em;}
</style>
<script type="text/javascript">
function timepick(e,n) {
globalN=n;
var popupStyle=document.getElementById("timepicker").style;
popupStyle.left=(e.clientX+50)+"px";
popupStyle.top=e.clientY+"px";
popupStyle.visibility="visible";
}
function setTime(f) {
if(f) {
var HHMM=f.HH.options[f.HH.selectedIndex].text;
HHMM+=":"+f.MM.options[f.MM.selectedIndex].text;
document.getElementById("day"+globalN).innerHTML=HHMM;
}
document.getElementById("timepicker").style.visibility="hidden";
}
</script>
</head>
<body>
<button onclick="timepick(event,0)">Monday 2005-12-05</button>
<span id="day0" class="time">HH:MM</span><br>
<button onclick="timepick(event,1)">Tuesday 2005-12-06</button>
<span id="day1" class="time">HH:MM</span><br>
<button onclick="timepick(event,2)">Wednesday 2005-12-07</button>
<span id="day2" class="time">HH:MM</span><br>
</button>
<div id="timepicker">
<form>
<select name="HH">
<option>06</option>
<option>07</option>
<option selected>08</option>
</select>
<select name="MM">
<option selected>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select>
<br><br>
<input type="button" value="OK" onclick="setTime(this.form)">
<input type="button" value="Cancel" onclick="setTime(false)">
</form>
</div>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top