Solved

Help with Start Time / End Time Picker and calculated duration

Posted on 2009-05-14
8
1,744 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Blog Template 2 31
Tool Box 2 32
Data is not showing from images 15 36
Randomize in Owl Carousel v1.3.2 6 16
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'…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
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…

930 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

10 Experts available now in Live!

Get 1:1 Help Now