Show only month and year in Ajax calendar extender in ASP.NET using JavaScript

In this article I will explain how to show only month and year in Ajax calendar extender in ASP.NET using JavaScript.

(Or)

Show only month and year in Ajax calendar extender in ASP.NET using JavaScript

Example :

Below is the textbox designed for showing Month & Year. Ajax Calendar Extender control is used for showing Month & Year.

 

Select Month:  <asp:TextBox ID="txtMonth" runat="server" AutoCompleteType="Disabled"></asp:TextBox>

<ajax:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" OnClientHidden="onCalendarHidden" 

 OnClientShown="onCalendarShown" Format="MM/yyyy" BehaviorID="calendar1"  TargetControlID="txtMonth">

</ajax:CalendarExtender>

 <ajax:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="txtMonth"

FilterType="Custom, Numbers" ValidChars="/" Enabled="True" />

Below JavaScript code is useful for showing only Month & Year.

<script type="text/javascript" language="javascript">

        function onCalendarShown() {

            var cal = $find("calendar1");

            cal._switchMode("months", true);

            if (cal._monthsBody) {

                for (var i = 0; i < cal._monthsBody.rows.length; i++) {

                    var row = cal._monthsBody.rows[i];

                    for (var j = 0; j < row.cells.length; j++) {

                        Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);

                    }

                }

            }

        }

        function onCalendarHidden() {

            var cal = $find("calendar1");

            if (cal._monthsBody) {

                for (var i = 0; i < cal._monthsBody.rows.length; i++) {

                    var row = cal._monthsBody.rows[i];

                    for (var j = 0; j < row.cells.length; j++) {

                        Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call);

                    }

                }

            }

        }

        function call(eventElement) {

            var target = eventElement.target;

            switch (target.mode) {

                case "month":

                    var cal = $find("calendar1");

                    cal.set_selectedDate(target.date);

                    cal._blur.post(true);

                    cal.raiseDateSelectionChanged(); break;

                    break;

            }

        }

    </script>

Out Put: