RadDateTimePicker set_minDate with Time

[digitall]

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.

[Scott Salyer]

Anyone?

[Radoslav]

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

[Scott Salyer]

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)?

[digitall]

Anyone?

[Radoslav]

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