show only month and year in ajax toolkit calendar extender

please help.. how to modify calendar extender display in ajax calendar extender to show only month and year, i mean the calendar view NOT the textbox text format, so i only select month name in specific year.

Bound ajax calendar extender to specific month and year only

I have two calendar extender, Which I want to restrict. When user selects any year from year drowdown list and month from month dropdown list, the calendar extender should show dates for selected mont

AJAX Calendar extender select month and year

Is it real and how can I think about it. To make so the user will select only the month and year, not date, because he need a period on full month, not some date. here is simple control … <asp:

Display and Select only Month an Year in Ajax Calendar Extender

I want my calendar to display only month and year and as well as select only month from the calendar. I have used a function which does one part of my requirement, but my main part is not fulfilled by



Synchronizing Ajax Toolkit Calendar Extender

I have two Ajax Toolkit calendar extenders. One of them is a start date and the other is the corresponding end date. What I would like to happen is when a date is selected in the Start calendar the En

How to limit year in ajax calendar extender

I have a Calendar Extender. I want to show only current year in calendar. User can not select 2010 as current year is 2011. So how to do this ?

Ajax tool kit Calendar Extender Limit Year selection

I am using Ajax tool kit calendar extender control, I want to limit the year selection from 1900 to current year only. I have seen here Year Limit to use StartDate and EndDate But when in code behind

Primefaces calendar component show only month and year

primefaces calendar component is getting Date by default. Can I get only month and year without dates. How to get only month and year

Ajax Toolkit Calendar Extender bold current date, ASP.NET

I am using Ajax Toolkit Calendar Extender, and i want to bold the current date, when calendar pops up. var a = 1; var b = ; function ShowToday(e) { if (a == 1) { a = $(td.ajax__calendar_active

How to use only part of the Ajax Toolkit’s calendar extender control

I currently have two requirements of the AJAX Calendar Extender, one simple and one complex. I would like to solve the simple scenario, and if the complex scenario can’t be feasibly solved, then the w

How to show month, year using rich:calendar?

I want to show the current month and year using rich:calendar component during page initialization

Answers

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestOnlyChangeMonthAndSetDefaultDay.aspx.vb"
    Inherits="SoluTest_CalendarUserControl.TestOnlyChangeMonthAndSetDefaultDay" %>


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>


    <script type="text/javascript">


        var cal1;
        var cal2;


        function pageLoad() {
            cal1 = $find("calendar1");
            cal2 = $find("calendar2");


            modifyCalDelegates(cal1);
            modifyCalDelegates(cal2);
        }


        function modifyCalDelegates(cal) {
            //we need to modify the original delegate of the month cell.
            cal._cell$delegates = {
                mouseover: Function.createDelegate(cal, cal._cell_onmouseover),
                mouseout: Function.createDelegate(cal, cal._cell_onmouseout),


                click: Function.createDelegate(cal, function(e) {
                    /// <summary>
                    /// Handles the click event of a cell
                    /// </summary>
                    /// <param name="e" type="Sys.UI.DomEvent">The arguments for the event</param>


                    e.stopPropagation();
                    e.preventDefault();


                    if (!cal._enabled) return;


                    var target = e.target;
                    var visibleDate = cal._getEffectiveVisibleDate();
                    Sys.UI.DomElement.removeCssClass(target.parentNode, "ajax__calendar_hover");
                    switch (target.mode) {
                        case "prev":
                        case "next":
                            cal._switchMonth(target.date);
                            break;
                        case "title":
                            switch (cal._mode) {
                                case "days": cal._switchMode("months"); break;
                                case "months": cal._switchMode("years"); break;
                            }
                            break;
                        case "month":
                            //if the mode is month, then stop switching to day mode.
                            if (target.month == visibleDate.getMonth()) {
                                //this._switchMode("days");
                            } else {
                                cal._visibleDate = target.date;
                                //this._switchMode("days");
                            }
                            cal.set_selectedDate(target.date);
                            cal._switchMonth(target.date);
                            cal._blur.post(true);
                            cal.raiseDateSelectionChanged();
                            break;
                        case "year":
                            if (target.date.getFullYear() == visibleDate.getFullYear()) {
                                cal._switchMode("months");
                            } else {
                                cal._visibleDate = target.date;
                                cal._switchMode("months");
                            }
                            break;


                        //                case "day":
                        //                    this.set_selectedDate(target.date);
                        //                    this._switchMonth(target.date);
                        //                    this._blur.post(true);
                        //                    this.raiseDateSelectionChanged();
                        //                    break;
                        case "today":
                            cal.set_selectedDate(target.date);
                            cal._switchMonth(target.date);
                            cal._blur.post(true);
                            cal.raiseDateSelectionChanged();
                            break;
                    }


                })
            }


        }


        function onCalendarShown(sender, args) {
            //set the default mode to month
            sender._switchMode("months", true);
            changeCellHandlers(cal1);
        }




        function changeCellHandlers(cal) {


            if (cal._monthsBody) {


                //remove the old handler of each month body.
                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++) {
                        $common.removeHandlers(row.cells[j].firstChild, cal._cell$delegates);
                    }
                }
                //add the new handler of each month body.
                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++) {
                        $addHandlers(row.cells[j].firstChild, cal._cell$delegates);
                    }
                }


            }
        }


        function onCalendarHidden(sender, args) {


            if (sender.get_selectedDate()) {
                if (cal1.get_selectedDate() && cal2.get_selectedDate() && cal1.get_selectedDate() > cal2.get_selectedDate()) {
                    alert('The "From" Date should smaller than the "To" Date, please reselect!');
                    sender.show();
                    return;
                }
                //get the final date
                var finalDate = new Date(sender.get_selectedDate());
                var selectedMonth = finalDate.getMonth();
                finalDate.setDate(1);
                if (sender == cal2) {
                    // set the calender2's default date as the last day
                    finalDate.setMonth(selectedMonth + 1);
                    finalDate = new Date(finalDate - 1);
                }
                //set the date to the TextBox
                sender.get_element().value = finalDate.format(sender._format);
            }
        }


    </script>


</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        From :
        <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
        <cc1:CalendarExtender ID="CalendarExtender1" BehaviorID="calendar1" runat="server"
            Enabled="True" Format="yyyy/MM/dd" TargetControlID="TextBox1" OnClientShown="onCalendarShown"
            OnClientHidden="onCalendarHidden">
        </cc1:CalendarExtender>
        To :
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <cc1:CalendarExtender ID="CalendarExtender2" BehaviorID="calendar2" runat="server"
            Enabled="True" Format="yyyy/MM/dd" TargetControlID="TextBox2" OnClientShown="onCalendarShown"
            OnClientHidden="onCalendarHidden">
        </cc1:CalendarExtender>
    </div>
    </form>
</body>
</html>

You can simply change the display mode of the CalendarExtender to month.

Step 1. Add an OnClientShown event to the CalendarExtender ie.

<AjaxControlToolkit:CalendarExtender ID="calTitleLength" runat="server" 
TargetControlID="txtMonth" OnClientShown="calendarShown">    
</AjaxControlToolkit:CalendarExtender>

Step 2. Handle the OnClientShown event to switch mode of calendar ie.

function calendarShown(sender, e) {
sender._switchMode("months", true); 
}

The OnClientShown function shown needs to do more than just switch modes. Here is the solution I got working, where it only shows the months and you can select the month and have only the month and year shown in the textbox.

Step 1

<asp:CalendarExtender ID="calendar1" ClientIDMode="Static" runat="server"
                      TargetControlID="txtDate" Format="yyyy-MM" 
                      DefaultView="Months" OnClientShown="onCalendarShown"
                      OnClientHidden="onCalendarHidden" PopupButtonID="imgStart" />

Please note: ClientIDMode = Static, DefaultView = Months and OnClientShown and OnClientHidden events attached.

You can also change Format=”yyyy-MM” to whatever format you want with the month and year in it.

Step 2

Create these Javascript functions. If you don’t have JQuery loaded, change $find to document.getElementById

<script type="text/javascript">

    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 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 call(eventElement) {
        var target = eventElement.target;
        switch (target.mode) {
            case "month":
                var cal = $find("calendar1");
                cal._visibleDate = target.date;
                cal.set_selectedDate(target.date);
                //cal._switchMonth(target.date);
                cal._blur.post(true);
                cal.raiseDateSelectionChanged();
                break;
        }
    }
</script>

Code modified from: http://danajaatcse.wordpress.com/2010/06/14/modifying-a-ajax-calender-control-to-operate-with-only-years/

In dealing with an inherited page with a stubborn script manager, getting the runaround about my javascript function being undefined, I finally ended up simply setting the html attribute for “DefaultView” to “Months” on the CalendarExtender like so:

<asp:CalendarExtender ID="dtPickerFrom" runat="server" CssClass="calendarClass" Enabled="true" Format="MMM-yy" PopupButtonID="imgcalendarFileDate" TargetControlID="TextBoxFileDate" DefaultView="Months">
</asp:CalendarExtender>

Here’s the associated property with its options:

show only month and year in ajax toolkit calendar extender

Result:

show only month and year in ajax toolkit calendar extender