New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-Side API

RadDatePicker

Event log
  • Demo Configurator
  • Date Settings
  • Set MinDate
  • Set MaxDate
Go to
RadDatePicker exposes a rich client-side API that allows you to control its behavior.

You can manipulate the Min/MaxDate values using the following client-side properties:
  • get_minDate( ) - Returns the date, representing the MinDate of the datepicker.
  • set_minDate(date) - if the date is valid, the datepicker MinDate is set to it.
  • get_maxDate( ) - Returns the date, representing the MaxDate of the datepicker.
  • set_maxDate(date) - if the date is valid, the datepicker MaxDate is set to it.


You can manipulate the date selection by using the get_selectedDate()/set_selectedDate(newValue) method pair:
var date = datePicker.get_selectedDate();
date.setDate(date.getDate() + 1);
datePicker.set_selectedDate(date);

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" Inherits="Telerik.Web.Examples.Calendar.Functionality.ClientAPI.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="containerDiv" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="EventLogConsole1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>

            <telerik:AjaxSetting AjaxControlID="containerDiv">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="EventLogConsole1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-thin " runat="server" id="containerDiv">
        <h2 class="qsfSubtitle">RadDatePicker</h2>
        <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker1" width="100%"  runat="server">
        </telerik:RadDatePicker>
    </div>
    
    <qsf:EventLogConsole runat="server" ID="EventLogConsole1" CssClass="eventLog"></qsf:EventLogConsole>

    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server"
        Expanded="true">
        <Views>
            <qsf:View Title="Date Settings">
            <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" >
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="MinDate"  onclick="setMinDate(this);"></asp:CheckBox>Set MinDate</span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="MaxDate"  onclick="setMaxDate(this);"></asp:CheckBox>Set MaxDate</span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" >
                <fieldset><legend>Go to</legend></fieldset>
                    <ul class="fb-group">
                        <li>
                            <qsf:Button runat="server" Text="Next Day" OnClientClicked="NextDay" AutoPostBack="false"></qsf:Button>
                        </li>
                        <li>
                            <qsf:Button ID="Button1" Text="Prev Day" runat="server" OnClientClicked="PrevDay" AutoPostBack="false"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

                
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance