Date Range selector

Thread is closed for posting
2 posts, 0 answers
  1. E69AACB4-3C5B-42BC-9BDD-D0F081D8FE34
    E69AACB4-3C5B-42BC-9BDD-D0F081D8FE34 avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Aug 2010 Link to this post


    RadControls version

    2010, 1, 519, 35
    .NET version

    3.5 SP1
    Visual Studio version

    programming language C#, Javascript
    browser support

    all browsers supported by RadControls

    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:
    protected void Button1_Click(object sender, EventArgs e)
        RangeSelector control = (RangeSelector)Page.FindControl("RangeSelector1");
        RadComboBox combo = (RadComboBox)control.FindControl("RadComboBox1");
        if (combo.Text == "Choose a Date")
            Label1.Text = "Not Selected";
            Label2.Text = "Not Selected";
            DateTime sDate = control.GetStartDate();
            DateTime eDate = control.GetEndDate();
            Label1.Text = sDate.ToShortDateString();
            Label2.Text = eDate.ToShortDateString();

    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"
            <table style="width: 100%;">
                        Start Date
                        <telerik:RadCalendar ShowRowHeaders="false" ShowColumnHeaders="true" Height="70"
                            Width="180" ID="RadCalendar1" EnableMultiSelect="false" runat="server">
                            <ClientEvents OnLoad="OnLoadCalendar1" OnDateSelected="Calendar1OnDateSelected" />
                        End Date
                        <telerik:RadCalendar ShowRowHeaders="false" ShowColumnHeaders="true" Height="70"
                            Width="180" ID="RadCalendar2" EnableMultiSelect="false" runat="server">
                            <ClientEvents OnLoad="OnLoadCalendar2" OnDateSelected="Calendar2OnDateSelected" />
            <telerik:RadComboBoxItem />
            <div style="text-align: center;">
                <input id="Button2" type="button" value="Done" onclick="getDates();" />
                <input id="Button1" type="button" value="Close" onclick="Close();" />
    <script type="text/javascript">
        var x = 0;
        function OnClientDropDownClosing(sender, args) {
            if (x == 0) {
        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;
            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;
        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;

    User Control code file - RangeSelector.ascx.cs:

    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    public partial class RangeSelector : System.Web.UI.UserControl
        protected void Page_Load(object sender, EventArgs e)
       public DateTime GetStartDate()
            RadCalendar calendar1 = (RadCalendar)RadComboBox1.Items[0].FindControl("RadCalendar1");       
            DateTime date1 = calendar1.SelectedDate;
            return (date1);       
        public DateTime GetEndDate()
            RadCalendar calendar2 = (RadCalendar)RadComboBox1.Items[0].FindControl("RadCalendar2");
            DateTime date2 = calendar2.SelectedDate;
            return (date2);

  2. 35FC6F20-EEB5-48C4-B91B-06C770662FC5
    35FC6F20-EEB5-48C4-B91B-06C770662FC5 avatar
    3388 posts
    Member since:
    Apr 2016

    Posted 23 Aug 2010 Link to this post

    Hi Princy,

    Thank you submitting a solution on how one can achieve range selection using the RadCalendar and RadComboBox controls. I am sure this will be useful example for the other community members.

    I also want to mention that for the next version of the RadCalendar for ASP.NET AJAX control we will provide the date range selection feature built-in.

    Best wishes,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.