Solved

Help with Start Time / End Time Picker and calculated duration

Posted on 2009-05-14
8
1,784 Views
Last Modified: 2012-05-07

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

0
Comment
Question by:megnin
  • 4
  • 4
8 Comments
 
LVL 11

Expert Comment

by:Muhammad Ousama Ghazali
ID: 24391200
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
 
LVL 1

Author Comment

by:megnin
ID: 24391320
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
 
LVL 11

Expert Comment

by:Muhammad Ousama Ghazali
ID: 24391336
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 
LVL 11

Accepted Solution

by:
Muhammad Ousama Ghazali earned 500 total points
ID: 24391363
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
 
LVL 1

Author Comment

by:megnin
ID: 24398270
Oh, yes, that's a good idea; using a button's postback.

0
 
LVL 11

Expert Comment

by:Muhammad Ousama Ghazali
ID: 24398386
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
 
LVL 1

Author Comment

by:megnin
ID: 24398520
Thank you.  You have shown some very nice techniques.  Those are very helpful.
0
 
LVL 1

Author Closing Comment

by:megnin
ID: 31581750
Just what I needed.  Thank you!
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question