RadDateTimePicker set_minDate with Time

6 posts, 0 answers
  1. digitall
    digitall avatar
    169 posts
    Member since:
    Jun 2006

    Posted 08 Aug 2011 Link to this post

    I have two RadDateTimePickers inside a RadGrid's <EditItemTemplate /> which represents a start/end date as such:
    <tr>
        <td><p><strong>Start Date: </strong></p></td>
        <td>
            <telerik:RadDateTimePicker runat="server" ID="rdtpStartDate" Skin="Windows7" DbSelectedDate='<%#Bind("StartDate") %>' ClientEvents-OnDateSelected="dateSelected" />
            <asp:RequiredFieldValidator runat="server" Display="None" ErrorMessage="Start Date is required." EnableClientScript="true" ControlToValidate="rdtpStartDate" />
        </td>
    </tr>
    <tr>
        <td><p><strong>End Date: </strong></p></td>
        <td>
            <telerik:RadDateTimePicker runat="server" ID="rdtpEndDate" Skin="Windows7" DbSelectedDate='<%#Bind("EndDate") %>' />
            <asp:RequiredFieldValidator runat="server" Display="None" ErrorMessage="End Date is required." EnableClientScript="true" ControlToValidate="rdtpEndDate" />
        </td>
    </tr>

    The ClientEvents-OnDateSelected script looks like this:
    <script language="javascript" type="text/javascript">
     
        function dateSelected(sender, args) {
            var hv = document.getElementById('<%=this.hvEndDateId.ClientID %>').value;
            var edp = $find(hv);
            var newDate = sender.get_selectedDate();
            edp.set_minDate(newDate);
        }       
     
    </script>

    Since it is in a grid I use a hidden field that sets the Id of the end date element when the grid goes into edit mode so when a start date is selected I can set the mininumum date of the end date picker - this whole process works fine.

    The problem I am encountering is when you select a date (say 8/31/2011) and select a time (say 7:00 PM) on the start date selector, the end date calendar has 8/31 as an available option, but you can't select it because it defaults to 8/31/2011 12:00:00AM which is before 7:00PM, thus invalid. This makes sense, but how can I make the end date's minimum value detect that it should be 8/31/2011 @ 7:00PM meaning if the end user selects 8/31 it automatically selects 7:00PM for the time? Naturally if they select an end date of 9/1 the default time would still be 12:00AM since that is after 8/31 @ 7:00PM.
  2. Scott Salyer
    Scott Salyer avatar
    14 posts
    Member since:
    Apr 2009

    Posted 11 Aug 2011 Link to this post

    Anyone?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 12 Aug 2011 Link to this post

    Hi Scott,

    To avoid the invalid value into the end date picker you could try setting the minimum date picked from the start date picker as a value of the end date picker:
    <script type="text/javascript">
                function dateSelected(sender, args) {
            var hv = document.getElementById('<%=this.hvEndDateId.ClientID %>').value;
            var edp = $find(hv);
            var newDate = sender.get_selectedDate();
            edp.set_minDate(newDate);
                edp.set_selectedDate(newDate);
            }
        </script>

    Additionally I am sending you a simple example which demonstrates the described approach. Please give it try and let me know if it helps you.

    Kind regards,
    Radoslav
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  5. Scott Salyer
    Scott Salyer avatar
    14 posts
    Member since:
    Apr 2009

    Posted 15 Aug 2011 Link to this post

    That got me really close, but it causes another side effect. When I select the start date/time, the end date then matches it. If someone accidentally selects an invalid time on the end date picker the control goes invalid (as expected) but from then on I am unable to select a valid time until I change the date of the end date picker first. It's like it invalidates and then can't reset itself when a new end time is selected that should be valid.

    Thoughts?

    Side question too - is there a way to make it something like edp.set_selectedDate(newDate + 1 hour)?
  6. digitall
    digitall avatar
    169 posts
    Member since:
    Jun 2006

    Posted 17 Aug 2011 Link to this post

    Anyone?
  7. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 18 Aug 2011 Link to this post

    Hi Digitall,

    I am sending you the modified version of the example which demonstrates how to achieve the desired functionality. Please check it out and let me know if it helps you.

    Additionally regarding your last question:
    Please check out the following posts:
    http://stackoverflow.com/questions/1050720/how-to-add-hours-to-javascript-date-object
    http://stackoverflow.com/questions/1197928/how-to-add-30-minutes-to-a-javascript-date-object

    I hope this helps.

    All the best,
    Radoslav
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017