In some cases you want to have the end users select dates within given ranges and to ensure one date is before the other (start - end date validation).
To show meaningful error messages to the users in realtime (in case the built-in validator messages do not suffice), you can:
<table>
<tr>
<td>
<telerik:RadDatePicker RenderMode=
"Lightweight"
ID=
"RadDatePicker1"
MinDate=
"2009/1/1"
runat=
"server"
DateInput-Label=
"Start Date:"
DateInput-LabelWidth=
"100px"
Width=
"100%"
>
<DateInput>
<ClientEvents OnValueChanging=
"OnValueChangingStartDate"
/>
</DateInput>
</telerik:RadDatePicker>
<asp:RequiredFieldValidator runat=
"server"
ID=
"RequiredFieldValidator1"
ControlToValidate=
"RadDatePicker1"
ErrorMessage=
"Enter a date!"
></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<telerik:RadDatePicker RenderMode=
"Lightweight"
ID=
"RadDatePicker2"
MinDate=
"2009/1/1"
runat=
"server"
DateInput-Label=
"End Date:"
Width=
"100%"
>
<DateInput>
<ClientEvents OnValueChanging=
"OnValueChangingEndDate"
/>
</DateInput>
</telerik:RadDatePicker>
<asp:RequiredFieldValidator runat=
"server"
ID=
"Requiredfieldvalidator2"
ControlToValidate=
"Raddatepicker2"
ErrorMessage=
"Enter a date!"
></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:CompareValidator ID=
"dateCompareValidator"
runat=
"server"
ControlToValidate=
"Raddatepicker2"
ControlToCompare=
"RadDatePicker1"
Operator=
"GreaterThan"
Type=
"Date"
ErrorMessage=
"The second date must be after the first one.<br /><br />"
>
</asp:CompareValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID=
"Label1"
runat=
"server"
></asp:Label>
</td>
</tr>
</table>
<telerik:RadButton RenderMode=
"Lightweight"
runat=
"server"
Text=
"Save"
ID=
"Button1"
OnClick=
"Button1_Click"
></telerik:RadButton>
<script>
function
OnValueChangingStartDate(sender, args) {
validateMinMaxDate(sender, args);
var
currDate = sender.parseDate(args.get_newValue());
var
secondPickerDate = $find(
"<%=RadDatePicker2.ClientID%>"
).get_selectedDate();
if
(secondPickerDate && secondPickerDate < currDate) {
args.set_cancel(
true
);
alert(
"choose a date before "
+ getHumanReadableDate(secondPickerDate));
}
}
function
OnValueChangingEndDate(sender, args) {
validateMinMaxDate(sender, args);
var
currDate = sender.parseDate(args.get_newValue());
var
firstPickerDate = $find(
"<%=RadDatePicker1.ClientID%>"
).get_selectedDate();
if
(firstPickerDate && firstPickerDate > currDate) {
args.set_cancel(
true
);
alert(
"choose a date after "
+ getHumanReadableDate(firstPickerDate));
}
}
function
validateMinMaxDate(dateInput, args) {
var
minDate = dateInput.get_minDate();
var
maxDate = dateInput.get_maxDate();
var
currDate = dateInput.parseDate(args.get_newValue());
if
(currDate < minDate || currDate > maxDate) {
args.set_cancel(
true
);
alert(
"choose a date between "
+ getHumanReadableDate(minDate) +
" and "
+ getHumanReadableDate(maxDate));
}
//if you show/hide elements on the page with the information from the alert, add an else statement to hide them here
return
false
;
}
function
getHumanReadableDate(dateToTransform) {
//you can choose a different way to format the date, this uses the MS AJAX string.format() method.
return
dateToTransform.format(
"dd MMM yyyy"
);
}
</script>