two datetimepickers linked

[HISEagle]

I'm new to the Telerik ASP.Net controls.

Question - is there somewhere in the help or samples that shows two datetimepickers linked? 
Explanation - I have a form with two datetimepickers...a start date/time and an end date/time.  The client wants to be able to select a date and time to start, but the end time MUST be later than the start date/time; however, the end DATE can be the same as long as the end TIME is later.
Example1 - start date/time  11/11/11 2:00am    end date/time 11/11/11 4:00pm - this is ok
Example2 - start date/time  11/11/11 5:00pm    end date/time 11/12/11 2:00am - this is ok

I would like the end date/time to ALLOW the same DATE, but NOT ALLOW the same or earlier time.

What's the answer?

[Maria Ilieva]

Hello Hiseagle,

 In order to achieve the required functionality you could use a approach with Custom Validator to trigger this check. For example:

<telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function validateFunction(sender, eventArgs) {
                eventArgs.IsValid = true;
                var firstPicker = $find("<%=rdtp_Start.ClientID %>");
                var secondPicker = $find("<%=rdtp_End.ClientID %>");

                if (secondPicker.get_selectedDate() <= firstPicker.get_selectedDate()) {
                    eventArgs.IsValid = false;
                }
            }
        </script>
    </telerik:RadCodeBlock>



 <telerik:RadDateTimePicker ID="rdtp_Start" runat="server" Width="200px">
    </telerik:RadDateTimePicker>
    <telerik:RadDateTimePicker ID="rdtp_End" runat="server" Width="200px">
    </telerik:RadDateTimePicker>
    <asp:CustomValidator runat="server" ID="CustomValidator1" ClientValidationFunction="validateFunction"
        ErrorMessage="End date must be after start date" EnableClientScript="true" ControlToValidate="rdtp_End"></asp:CustomValidator>

Give this a try and let me know if it works for you.

Greetings,
Maria Ilieva
the Telerik team

[HISEagle]

Maria,

Thanks for the info; however, it did not work for us.  Maybe I haven't given enough information.  I'm working with a RADGrid that has a datein and a dateout with full "MM/dd/yyyy hh:mm tt"  in each.  We're using a user control (.ascx) as the grideditform.  Our customer wants their "client" to ONLY be able to change the time portion on either the datein or the dateout.  We can give them the textbox with the time only in it, but can't get it to compare the datein time with the dateout time properly.

There is an additional comparison element in that the dateout can be as much as 2 or 3 days after the datein; therefore, the dateout time could be AM while the datein time is PM.  Obviously, if the comparison is only the time in each, in the case of this last element, the comparison would cause a failure.

We've tried several things.  Maybe we've repeated an error some place, but it doesn't work yet.

[Maria Ilieva]

Hello,

I'm not completely sure if i correctly understand your case and the excat scenario you are implementing. Could you please paste some markup from your RadGrid and the related code behind so we could further investigate on the settings you have and do our best to provide proper approach for the required functionality.

All the best,
Maria Ilieva
the Telerik team

[Jonathan]

<tr>
                        <td>Date/Time In:
                        </td>
                        <td><asp:Label id="txtDateIn" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.DateIn","{0:MM/dd/yy}") %>' Width="48px" />
                        <telerik:RadDateTimePicker DatePopupButton-Visible="false" ID="RadDateTimePicker3" EnableEmbeddedSkins="false" Skin="UCP_Vista" Width="85px" DbSelectedDate='<%# DataBinder.Eval( Container, "DataItem.DateIn")%>' runat="server">
                            <TimeView ID="TimeView1" runat="server" Interval="00:15:00" Columns="6" EnableEmbeddedSkins="false" Skin="UCP_Vista" ShowHeader="false" />
                            <DateInput ID="DateInput1" DateFormat="h:mm tt" runat="server" Font-Size="11px" Font-Bold="true" ForeColor="#396F96" CssClass="itemt" />
                        </telerik:RadDateTimePicker>
                        </td>
                    </tr>
                    <tr>
                        <td>Date/Time Out:
                        </td>
                        <td><asp:Label id="txtDateOut" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.DateOut","{0:MM/dd/yy}") %>' Width="48px" />
                        <telerik:RadDateTimePicker DatePopupButton-Visible="false" ID="RadDateTimePicker4" EnableEmbeddedSkins="false" Skin="UCP_Vista" Width="85px" DbSelectedDate='<%# DataBinder.Eval(Container, "DataItem.DateOut")%>' runat="server">
                            <TimeView ID="TimeView2" runat="server" Interval="00:15:00" Columns="6" EnableEmbeddedSkins="false" Skin="UCP_Vista" ShowHeader="false" />
                            <DateInput ID="DateInput2" DateFormat="h:mm tt" runat="server" Font-Size="11px" Font-Bold="true" ForeColor="#396F96" CssClass="itemt" />
                        </telerik:RadDateTimePicker><br />
                        </td>
                    </tr>

Maria,

I work with HISEagle on that same project. The above is what our source-code looks like for the two DateTimePickers. They are used on a separate ascx file which is being used as the EditForm for the RadGrid.

If you take these two which have been set up to only offer time as changeable, and try to use a Microsoft CompareValidator on them, requiring that RadDateTimePicker4 be greater than RadDateTimePicker3, the validator will fire as invalid if the 4 picker has a later date but an earlier time of day than the 3 picker. It is receiving the time with the current date attached to it instead of the date originally fed to the control.

We have managed to get around this issue by ditching the CompareValidator and doing some concatenation and comparison in the Update event of the Grid in code-behind instead, as shown in the code below, but is there any way of using validator controls for this? And is the control using the current date instead of its original date as designed, or is that a bug?

RadDateTimePicker dtpIn = (RadDateTimePicker)userControl.FindControl("RadDateTimePicker3");
                        Label txtIn = (Label)userControl.FindControl("txtDateIn");
                        Label txtOut = (Label)userControl.FindControl("txtDateOut");
                        DateTime dtmIn = Convert.ToDateTime(txtIn.Text) + ((DateTime)dtpIn.SelectedDate).TimeOfDay; //(DateTime)dtpIn.SelectedDate;
                        RadDateTimePicker dtpOut = (RadDateTimePicker)userControl.FindControl("RadDateTimePicker4");
                        DateTime dtmOut = Convert.ToDateTime(txtOut.Text) + ((DateTime)dtpOut.SelectedDate).TimeOfDay; //(DateTime)dtpOut.SelectedDate;

                        //test whether they've put the end date before the start date
                        if (dtmOut <= dtmIn)
                        {
                            e.Canceled = true;
                            radNoteRequestForm.Title = "Invalid Date/Time";
                            radNoteRequestForm.Text = "Your Time Out must be after your Time In.";
                            radNoteRequestForm.Show();
                            return;
                        }

[Maria Ilieva]

Hi Jonathan,

You could try to validate the DateTimePickers controls on the server with Compare Validator when postback appears. For example:
ASPX:

<telerik:RadDateTimePicker ID="RadTimePickerFirst" DatePopupButton-Visible="false" SelectedDate="10/27/2011" runat="server">
    </telerik:RadDateTimePicker>
    <telerik:RadDateTimePicker ID="RadTimePickerSecond" DatePopupButton-Visible="false" SelectedDate="10/27/2011" runat="server">
    </telerik:RadDateTimePicker>
    <asp:CompareValidator ID="CompareValidatorDatePickers" ControlToCompare="RadTimePickerFirst"
        ControlToValidate="RadTimePickerSecond" runat="server" Operator="GreaterThan"
        ErrorMessage="The second date must be grater than the first!" ValidationGroup="myGroup"
        EnableClientScript="False"></asp:CompareValidator>
        <asp:Button ID="ButtonPostback" runat="server" ValidationGroup="myGroup" Text="Postback" />

C#:

protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);

        ButtonPostback.Click += new EventHandler(ButtonPostback_Click);
    }

    void ButtonPostback_Click(object sender, EventArgs e)
    {
        Page.Validate();

    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        if (RadTimePickerFirst.SelectedDate.Value > RadTimePickerSecond.SelectedDate.Value)
        {
            Page.Validate();

        }

    }

All the best,
Maria Ilieva
the Telerik team