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

Client-Side API

Event log
  • Demo Configurator
  • MinDate
  • MaxDate
  • RadMonthYearPicker Enabled
MonthYearPicker exposes a rich client-side API that allows you to control its behavior.

You can manipulate the Min/MaxDate properties by the following client-side functions:
  • 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 GetDate()/SetDate(newValue) method pair:
var selectedDate = monthyearPicker.get_selectedDate();
var year = (selectedDate.getFullYear() + 1);
var month = (selectedDate.getMonth());
var date = selectedDate.getDate();
monthyearPicker.set_selectedDate(new Date(year, month, date));

The datepicker child controls (RadDateInput and DatePopupButton) are available via the DateInput and DatePopupButton properties.
  • DefaultCS.aspx
  • scripts.js
<%@ 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 type="text/javascript" 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:RadScriptBlock runat="server">
        <script type="text/javascript">
            function pageLoad() {
                demo.initialize($find("<%= RadMonthYearPicker1.ClientID %>"));
            }
            
        </script>
    </telerik:RadScriptBlock>
    <div class="demo-container size-thin" runat="server" id="containerDiv">
        <h3> RadMonthYearPicker</h3>
        <telerik:RadMonthYearPicker RenderMode="Lightweight" ID="RadMonthYearPicker1" Width="100%" runat="server">
            <ClientEvents OnViewChanged="demo.OnViewChanged" OnPopupOpening="demo.OnPopupOpening" OnPopupClosing="demo.OnPopupClosing"
                OnDateSelected="demo.OnDateSelected"></ClientEvents>
            <DateInput runat="server" ID="DateInput">
                <ClientEvents OnLoad="demo.onLoad"></ClientEvents>
            </DateInput>
        </telerik:RadMonthYearPicker>
    </div>

    <qsf:EventLogConsole runat="server" ID="EventLogConsole2" CssClass="eventLog"></qsf:EventLogConsole>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server" Orientation="Vertical"
        Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">

                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="MinDate" Text="01/2011" onclick="demo.setMinDate(this);"></asp:CheckBox> MinDate</span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="MaxDate" Text="12/2015" onclick="demo.setMaxDate(this);"></asp:CheckBox> MaxDate</span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="Enabled" Checked="true"
                                    onclick="demo.Enable(this);"></asp:CheckBox> RadMonthYearPicker Enabled</span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button ID="Button1" runat="server" Text="Move to next year" OnClientClicked="demo.NextYear" AutoPostBack="false"></qsf:Button>
                        </li>
                        <li>
                            <qsf:Button ID="Button2" Text="Move to previous year" runat="server" OnClientClicked="demo.PrevYear" AutoPostBack="false"></qsf:Button>

                        </li>
                        <li>
                            
                                <qsf:Button ID="Button3" runat="server" AutoPostBack="false" OnClientClicked="demo.clearText" Text="Clear MonthYear value"></qsf:Button>
                          
                        </li>

                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance