Compare date and time using RadDateTimePicker

After searching a lot I found the solution to compare date and time using RadDateTimePicker because it was not fulfilling my requirements. So if you are working with Telerik RadDateTimePicker and you want to compare date and time using RadDateTimePicker then you can use the following code:

Lets say you have following two RadDateTimePicker controls on your page for start date and end date:

This one

<telerik:RadDateTimePicker ID=”dpStartDateTime” runat=”server”>
<TimeView ID=”TimeView1″ Interval=”00:30:00″ runat=”server” StartTime=”07:30:00″>
</TimeView>
<DateInput ID=”DateInput1″ runat=”server”>
<ClientEvents OnLoad=”onLoadRadTimePicker1″></ClientEvents>
</DateInput>
</telerik:RadDateTimePicker>

and the other one

<telerik:RadDateTimePicker ID=”dpEndDateTime” runat=”server”>
<TimeView ID=”TimeView2″ Interval=”00:30:00″ runat=”server” StartTime=”07:30:00″>
</TimeView>
<DateInput ID=”DateInput2″ runat=”server”>
<ClientEvents OnLoad=”onLoadRadTimePicker2″></ClientEvents>
</DateInput>
</telerik:RadDateTimePicker>

Your RadDateTimePicker may have different properties for TimeView according to what you want to display in time picker.

Now you have to put the CustomValidator control on your page in order to do the validation for start and end date.

<asp:CustomValidator runat=”server” ID=”CustomValidator1″ Text=”*” Display=”dynamic”
EnableClientScript=”true” ClientValidationFunction=”compare” />

You can set the ValidateEmptyText=”false” in the above tag if you do not want to compare the empty text.

Also you can set the ValidationGroup=”YourValidationGroupName” in the above tag if you want to do the validation for specific group using specific button click.

Now you have to write your CustomValidator ClientValidationFunction which will do the validation and date time comparison.

<script type=”text/javascript”>

//<![CDATA[
var RadTimePicker1;
var RadTimePicker2;

function compare(sender, args) {
var Date1 = new Date(RadTimePicker1.get_selectedDate());
var Date2 = new Date(RadTimePicker2.get_selectedDate());

args.IsValid = true;
if ((Date2 – Date1) <= 0) {
alert(‘End date time must be greater than start date time’);
args.IsValid = false;
}
}

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

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

</script>

Enjoyyyy!!!