calculate the difference between two RadTimePicker controls

[Zash]

I have two RadTimePciker  called start time, end time and would like perform the following validation.
start time and end time should have an 45 minutes in length
for eg: if the start time is 4:15 P.M then end time should be minimum 5:00 P.M ..if the user enter less than it should throw an validation message.

below is my code :
am able to get the value of Date1 and Date2 , the difference is not working..would appreciate for any help.


<telerik:RadScriptBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
             //<![CDATA[
           var RadTimePicker1;
            var RadTimePicker2;

            function validate(sender, args) {
                var Date1 = getClockTime(RadTimePicker1.get_selectedDate());
                alert(Date1);                
                var Date2 = getClockTime(RadTimePicker2.get_selectedDate());
                alert(Date2);                
                args.IsValid = true;
                alert(Date2 - Date1);
                if ((Date2 - Date1) <45 )) {
                    alert("The second time value should be greater than the first!");
                    args.IsValid = false;
                }
            }

            function onLoadRadTimePicker1(sender, args) {
                RadTimePicker1 = sender;
            }

            function onLoadRadTimePicker2(sender, args) {
                RadTimePicker2 = sender;
            }

            function getClockTime(T) {
                var now = new Date(T);
                var hour = now.getHours();
                var minute = now.getMinutes();
                var second = now.getSeconds();
                var ap = "AM";
                if (hour > 11) { ap = "PM"; }
                if (hour > 12) { hour = hour - 12; }
                if (hour == 0) { hour = 12; }
                if (hour < 10) { hour = "0" + hour; }
                if (minute < 10) { minute = "0" + minute; }
                if (second < 10) { second = "0" + second; }
                var timeString = hour +
                    ':' +
                    minute +
                    " " +
                    ap;
                return timeString;
            }

            //]]>
         </script>
        </telerik:RadScriptBlock>
  <telerik:GridTemplateColumn HeaderText="Begin Time" UniqueName="BeginTime">   
                            <EditItemTemplate>  
                                <telerik:RadTimePicker ID="RadTimePicker1" runat="server" Culture="English (United States)"  
                                    DbSelectedDate='<%# Bind("BeginTime", "{0:HH:mm}") %>' SharedCalendarID="" >  
                                     <DateInput runat="server" ><ClientEvents OnLoad="onLoadRadTimePicker1" /></DateInput>
                                     <TimeView runat="server" StartTime="06:00" EndTime="18:15" Interval="00:15:00"></TimeView>
                                </telerik:RadTimePicker>  
                               <asp:RequiredFieldValidator ID="ReqValidtor" runat="server" ErrorMessage="Required Field" InitialValue="" ControlToValidate="RadTimePicker1"></asp:RequiredFieldValidator>

                            </EditItemTemplate>  
                            <ItemTemplate>  
                                <asp:Label ID="dtLabel" runat="server" Text='<%# Eval("BeginTime", "{0:HH:mm}") %>' />  
                            </ItemTemplate>  
              <HeaderStyle Font-Bold="true" HorizontalAlign="Center" Width="40px" />
             </telerik:GridTemplateColumn>  
    <telerik:GridTemplateColumn HeaderText="End Time" UniqueName="EndTime">   
                            <EditItemTemplate>  
                                <telerik:RadTimePicker ID="RadTimePicker2" runat="server" Culture="English (United States)"  
                                    DbSelectedDate='<%# Bind("EndTime", "{0:HH:mm}") %>' SharedCalendarID="">   
                                    <DateInput ID="DateInput1" runat="server"><ClientEvents OnLoad="onLoadRadTimePicker2" /></DateInput>
                                    <TimeView ID="TimeView1" runat="server" StartTime="06:00" EndTime="18:15" Interval="00:15:00"></TimeView>
                                </telerik:RadTimePicker>
                                <asp:RequiredFieldValidator ID="ReqValidator" runat="server" ErrorMessage="Required Field" InitialValue="" ControlToValidate="RadTimePicker2"></asp:RequiredFieldValidator>
                                <asp:CustomValidator ID= "CusValidotor" runat="server" EnableClientScript="true" ControlToValidate="RadTimePicker2" ClientValidationFunction="validate"></asp:CustomValidator>
                           </EditItemTemplate>  
                            <ItemTemplate>  
                                <asp:Label ID="dtLabel1" runat="server" Text='<%# Eval("EndTime", "{0:HH:mm}") %>' />  
                            </ItemTemplate>
             <HeaderStyle Font-Bold="true" HorizontalAlign="Center" Width="40px" />
             </telerik:GridTemplateColumn>  


Thanks
Mohana Raman

[Princy]

Hello Zash,

As I examined your code, you cannot directly perform any operations by accessing the two date fields. In order to achieve this, you need to convert the date fields using Client side javascript and then take the difference. Check the following demo and documentation which explains more about this.
Calendar / Client-side API.
Client-Side Basics.

Thanks,
Princy.