Solved

Help with Start Time / End Time Picker and calculated duration

Posted on 2009-05-14
8
1,727 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
 
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now