|
RadControls version
|
2010, 1, 519, 35 |
| .NET version |
3.5 SP1 |
| Visual Studio version |
2008 |
| programming language |
C#, Javascript |
| browser support |
all browsers supported by RadControls
|
PROJECT DESCRIPTION
The project demonstrates how can be achieved picking a date range using RadCalendar and RadCombobox controls, which is very similar to DatePicker interface. This is implemented by placing two RadCalendar (for startdate and enddate) in RadComboBox ItemTemplate part and two buttons (one for getting date range and other for closing the dropdown). In the OnDateSelected client event of each calendar, sets the selectable dates in the other calendar, by setting the MaxDate/MinDate values. And in OnClientClick event of the OK button, gets the selected date(date range) from two calendar.
Getting the selected date range in main page:
User Control mark-up - RangeSelector.ascx:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="RangeSelector.ascx.cs"
Inherits="RangeSelector" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadComboBox ID="RadComboBox1" runat="server" DropDownWidth="390" Text="Choose a Date"
OnClientDropDownClosing="OnClientDropDownClosing" AllowCustomText="true" ShowToggleImage="false"
runat="server">
<ItemTemplate>
<table style="width: 100%;">
<tr>
<td>
Start Date
<telerik:RadCalendar ShowRowHeaders="false" ShowColumnHeaders="true" Height="70"
Width="180" ID="RadCalendar1" EnableMultiSelect="false" runat="server">
<ClientEvents OnLoad="OnLoadCalendar1" OnDateSelected="Calendar1OnDateSelected" />
</telerik:RadCalendar>
</td>
<td>
End Date
<telerik:RadCalendar ShowRowHeaders="false" ShowColumnHeaders="true" Height="70"
Width="180" ID="RadCalendar2" EnableMultiSelect="false" runat="server">
<ClientEvents OnLoad="OnLoadCalendar2" OnDateSelected="Calendar2OnDateSelected" />
</telerik:RadCalendar>
</td>
</tr>
</table>
</ItemTemplate>
<Items>
<telerik:RadComboBoxItem />
</Items>
<FooterTemplate>
<div style="text-align: center;">
<input id="Button2" type="button" value="Done" onclick="getDates();" />
<input id="Button1" type="button" value="Close" onclick="Close();" />
</div>
</FooterTemplate>
</telerik:RadComboBox>
<script type="text/javascript">
var x = 0;
function OnClientDropDownClosing(sender, args) {
if (x == 0) {
args.set_cancel(true);
}
}
function getDates() {
var combo = $find("<%=RadComboBox1.ClientID %>");
var item = combo.get_items();
var startDate = item.getItem(0).findControl("RadCalendar1").GetSelectedDates()[0];
var endDate = item.getItem(0).findControl("RadCalendar2").GetSelectedDates()[0];
if (startDate != undefined && endDate != undefined) {
var startDateYear = item.getItem(0).findControl("RadCalendar1").GetSelectedDates()[0][0];
var startDateMonth = item.getItem(0).findControl("RadCalendar1").GetSelectedDates()[0][1];
var startDate = item.getItem(0).findControl("RadCalendar1").GetSelectedDates()[0][2];
var endDateYear = item.getItem(0).findControl("RadCalendar2").GetSelectedDates()[0][0];
var endDateMonth = item.getItem(0).findControl("RadCalendar2").GetSelectedDates()[0][1];
var endDate = item.getItem(0).findControl("RadCalendar2").GetSelectedDates()[0][2];
combo.set_text(startDateMonth + '/' + startDate + '/' + startDateYear + '-' + endDateMonth + '/' + endDate + '/' + endDateYear);
x = 1;
combo.hideDropDown();
}
else if (startDate == undefined && endDate != undefined) {
alert("Please select Start date");
}
else if (startDate != undefined && endDate == undefined) {
alert("Please select End date");
}
else {
alert("Please select Start and End dates");
}
}
function Close() {
var combo = $find("<%=RadComboBox1.ClientID %>");
combo.set_text("Choose a Date");
x = 1;
combo.hideDropDown();
}
var firstCalendar;
function OnLoadCalendar1(sender, args) {
firstCalendar = sender;
}
var secondCalendar;
function OnLoadCalendar2(sender, args) {
secondCalendar = sender;
}
function Calendar1OnDateSelected(sender, args) {
var calendar1 = sender;
var calendar2 = secondCalendar;
if (calendar1.get_selectedDates()[0] != undefined) {
var dates = calendar1.get_selectedDates();
var date = dates[0];
date[2] = date[2];
calendar2.set_rangeMinDate(date); // setting minimum date range for Calendar2
}
x = 0;
}
function Calendar2OnDateSelected(sender, args) {
var calendar2 = sender;
var calendar1 = firstCalendar;
if (calendar2.get_selectedDates()[0] != undefined) {
var dates = calendar2.get_selectedDates();
var date = dates[0];
date[2] = date[2];
calendar1.set_rangeMaxDate(date); // setting maximum date range for Calendar1
}
x = 0;
}
</script>
User Control code file - RangeSelector.ascx.cs
:
Thanks,
Princy.