Help with Start Time / End Time Picker and calculated duration


Well, I've wasted one whole day trying to get this stupid time picker to post back so that the txtDuration Text Box will show the amount of time between StartTime and EndTime.
It's a nice time picker
//      Written by Tan Ling wee
//      on 19 June 2005
//      url : www.sparrowscripts.com

and works fine.  

I just can't get a Post Back to fire so the text box updates.  The little images that "onclick" cause the time selector to pop up do not cause a post back and the textchanged event on the time text boxes does not fire when they are updated by the javascript.

 <%--<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
 <Triggers>
 </Triggers>
 <ContentTemplate>--%>
      <table>
            <tr>
                  <td>Start Time:
                  <%--<input id='timepicker1' type='text' value='8:00 am' size='8' maxlength='8' onblur="validateDatePicker(this)"/>--%>
                <asp:TextBox id='timepicker1' runat="server"  value='8:00 am' size='8'
                    maxlength='8' onblur="validateDatePicker(this)"
                    ontextchanged="timepicker1_TextChanged" AutoPostBack="True">
                </asp:TextBox>
                  <img src="images/timepicker/timepicker.gif" border="0" alt="Pick a Time!"
                       style="cursor: hand" width="30" height="20"
                       onclick="selectTime(this,timepicker1)" />
            </td>
                  
                  <td>End Time:
                  <%--<input id='timepicker2' type='text' value='12:00 pm' size='8' maxlength='8' onblur="validateDatePicker(this)"/>--%>
                <asp:TextBox id='timepicker2' runat="server" value='12:00 pm' size='8'
                    maxlength='8' onblur="validateDatePicker(this)"
                    ontextchanged="timepicker2_TextChanged" AutoPostBack="True">
                </asp:TextBox>
                  <img src="images/timepicker/timepicker.gif" border="0" alt="Pick a Time!"
                       style="cursor: hand" width="30" height="20"
                       onclick="selectTime(this,timepicker2)" />
                  </td>
                  <td>
                Duration: <asp:TextBox ID="txtDuration" runat="server"></asp:TextBox>
                  </td>
            </tr>
      </table>
<%--</ContentTemplate>      
 </asp:UpdatePanel>--%>

Partial Class zTestPage
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim time1 As Date = "12:30:44 AM"
        Dim time2 As Date = "2:56:33 PM"
        time1 = timepicker1.Text
        time2 = timepicker2.Text
    End Sub
 
    Protected Sub timepicker1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles timepicker1.TextChanged
        Dim time1 As Date = "12:34:44 AM"
        Dim time2 As Date = "2:56:33 PM"
        Dim vHours As Long
        Dim vMinutes As Long
        'Dim vDuration As String
        time1 = timepicker1.Text
        time2 = timepicker2.Text
        vHours = DateDiff(DateInterval.Hour, time1, time2)
        vMinutes = DateDiff(DateInterval.Minute, time1, time2)
        If vMinutes > 60 Then vMinutes = vMinutes - vHours * 60
        txtDuration.Text = vHours.ToString & ":" & vMinutes.ToString
        
    End Sub
 
    Protected Sub timepicker2_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles timepicker2.TextChanged
        Dim time1 As Date = "12:34:44 AM"
        Dim time2 As Date = "2:56:33 PM"
        Dim vHours As Long
        Dim vMinutes As Long
        'Dim vDuration As String
        time1 = timepicker1.Text
        time2 = timepicker2.Text
        vHours = DateDiff(DateInterval.Hour, time1, time2)
        vMinutes = DateDiff(DateInterval.Minute, time1, time2)
        If vMinutes > 60 Then vMinutes = vMinutes - vHours * 60
        txtDuration.Text = vHours.ToString & ":" & vMinutes.ToString
 
    End Sub
End Class

Open in new window

LVL 1
megninAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Muhammad Ousama GhazaliConnect With a Mentor Solution Analyst & ArchitectCommented:
Browse to this link and go to end of page where you'll find an example to be helpful in your case:
http://forums.asp.net/t/1071149.aspx
0
 
Muhammad Ousama GhazaliSolution Analyst & ArchitectCommented:
It might take some time to see your requirements and code, but a quick suggestion is to move to ASP.NET AJAX Control Toolkit's Calendar control for a very good interface (partially vista like) and functionality.
Check the official samples site here: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx
0
 
megninAuthor Commented:
I've installed and given a quick look at the newest AJAX Control Toolkit both at work and at home.  I couldn't find anything on using the Calendar control for time only.

I've looked at many JavaScript TimePickers, but nothing has a textbox or field to display the duration of time between the StartTime and EndTime.  This is for a simple working hours selector.  Start at 8:00 am, End at 1:00 pm I want a text box to show "5:00 hours".

If I can't find something that looks nice like some of the JavaScript options I'll just use two plain old DropDownList and 24 Hour (Military) time.  At least I can get a DropDownList to do a post back.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Muhammad Ousama GhazaliSolution Analyst & ArchitectCommented:
Check the following ASPX code which have been copied from one our my projects which utilizes MaskedEditExtender and MaskedEditValidator controls in addition to Calendar control to have better experience for the user.
Please make approrpiate changes as per your own requirements. And to access the date selected, just simply read the Text property of the TextBox.
Further, as per my knowledge there are events such As TextChanged which are not fired automatically (means they don't create postback from client), although when some other control having postback functionality such as a button will create a postback, the TextChanged property of the textbox will be executed.

<asp:TextBox ID="txtApplicationLastDateFrom" runat="server" CssClass="TextBox" Width="100px" />&nbsp;<asp:ImageButton runat="Server" ID="btnApplicationLastDateFrom" ImageUrl="~/images/icon_calendar.png" AlternateText="Click to show calendar" ImageAlign="AbsMiddle" CausesValidation="False" />
<cc1:MaskedEditExtender ID="txtApplicationLastDateFromMaskedEditExtender" runat="server" 
	TargetControlID="txtApplicationLastDateFrom"
	CultureName="en-GB"
	Mask="99/99/9999"
	MessageValidatorTip="False"
	MaskType="Date"
	ErrorTooltipEnabled="False" />
<cc1:CalendarExtender ID="txtApplicationLastDateFromCalendarExtender" runat="server" 
	PopupButtonID="btnApplicationLastDateFrom" TargetControlID="txtApplicationLastDateFrom" 
	FirstDayOfWeek="Saturday" Format="dd/MM/yyyy" 
	PopupPosition="BottomLeft" />
<cc1:MaskedEditValidator ID="txtApplicationLastDateFromMaskedEditValidator" runat="server" 
	CssClass="Validator" Display="Dynamic" 
	ControlExtender="txtApplicationLastDateFromMaskedEditExtender" 
	ControlToValidate="txtApplicationLastDateFrom" 
	EmptyValueMessage=""
	InvalidValueMessage=""
	IsValidEmpty="True" />

Open in new window

0
 
megninAuthor Commented:
Oh, yes, that's a good idea; using a button's postback.

0
 
Muhammad Ousama GhazaliSolution Analyst & ArchitectCommented:
Although not related to Textbox but Hyperlink but the same could be done for Textbox by using a hidden button, I have answered on relevent but not exact question to use such as trick. Please see here:
http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_24412160.html
0
 
megninAuthor Commented:
Thank you.  You have shown some very nice techniques.  Those are very helpful.
0
 
megninAuthor Commented:
Just what I needed.  Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.