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

Client-side API

  • Set/Get values on client



  • Methods


RadDateInput provides a flexible client-side API that allows you to easily interact with the control on the client.

In this demo you can examine how to use the client-side API to change or retrieve the SelectedDate, MaxDate and EmptyMessage of the control and to test some of the exposed methods in the API.

You can find more useful information and help in the provided related resources.

Related Resources

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#"  %>

<%@ 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" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadLabel runat="server" ID="RadLabel1" AssociatedControlID="RadDateInput1" Text="RadDateInput"></telerik:RadLabel>
            <telerik:RadDateInput RenderMode="Lightweight" ID="RadDateInput1" runat="server"
                EmptyMessage="Enter a date">
                <ClientEvents OnLoad="demo.load" />
            </telerik:RadDateInput>
        </div>
    </div>

    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Set/Get values on client">
        <Views>
            <qsf:View CssClass="customized-labels">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <label for="RadDatePicker1">Set/Get Value</label><br />
                            <qsf:DatePicker ID="RadDatePicker1" Value="200" runat="server" Width="216px"></qsf:DatePicker>
                            <br />
                            <br />
                            <qsf:Button ID="Button1" runat="server" Text="Set value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.setInputValue('RadDatePicker1');}"></qsf:Button>
                            <qsf:Button ID="Button5" runat="server" Text="Get value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getInputValue();}"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <label for="NumericTextBox4">Set/Get MaxDate</label><br />
                            <qsf:DatePicker ID="RadDatePicker2" runat="server" Value="3" Width="216px" NumberFormat-DecimalDigits="0"></qsf:DatePicker>
                            <br />
                            <br />
                            <qsf:Button ID="Button3" runat="server" Text="Set value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.setMaxValue('RadDatePicker2');}"></qsf:Button>
                            <qsf:Button ID="Button4" runat="server" Text="Get value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getMaxValue();}"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <label for="RadTextBox3">Set/Get EmptyMessage</label><br />
                            <qsf:TextBox ID="RadTextBox3" Text="Some message" runat="server" Width="216px"></qsf:TextBox><br />
                            <br />
                            <qsf:Button ID="Button2" runat="server" Text="Set value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.setEmptyMessage('RadTextBox3');}"></qsf:Button>
                            <qsf:Button ID="Button6" runat="server" Text="Get value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getEmptyMessage();}"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <span>Methods</span><br />
                            <qsf:Button ID="Button9" runat="server" Text="Clear value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getDemoInputControl().clear();}"></qsf:Button>
                            <qsf:Button ID="Button10" runat="server" Text="Select all" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getDemoInputControl().selectAllText();}"></qsf:Button>
                            <br />
                            <br />
                            <qsf:Button ID="Button7" runat="server" Text="Get Display Value" Width="106px" AutoPostBack="false" OnClientClicked="function(){alert('Display value: ' + demo.getDemoInputControl().get_displayValue());}"></qsf:Button>
                            <qsf:Button ID="Button8" runat="server" Text="Get Date Format" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.showDateFormat();}"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance