show only month and year in ajax toolkit calendar extender

StackOverflow https://stackoverflow.com/questions/16682173

Question

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.

Was it helpful?

Solution 2

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:

enter image description here

Result:

enter image description here

OTHER TIPS

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/

<%@ 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); 
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top