Question

请帮忙.. 如何在ajax日历扩展器中修改日历扩展器显示只显示月份和年份，我的意思是日历视图不是文本框文本格式，所以我只选择特定年份的月份名称。

Answer 1

显示的OnClientShown函数不仅仅需要切换模式。这是我工作的解决方案，它只显示月份，你可以选择月份，只有文本框中显示的月份和年份。

第1步

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

请注意： ClientIDMode =静态， DefaultView =已连接月份和 OnClientShown 和 OnClientHidden 事件。

您还可以将Format =“yyyy-MM”更改为您想要的月份和年份格式。

第2步

创建这些Javascript函数。如果您没有加载JQuery，请将$ find更改为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>

代码修改自：http://danajaatcse.wordpress.com/2010/06/14/modifying-a-ajax-calender-control-to-operate-with-only-years/

Answer 2

在使用顽固的脚本管理器处理继承的页面时，得到关于我的javascript函数未定义的解决方法，我最终只是简单地在CalendarExtender上将“DefaultView”的html属性设置为“Months”，如下所示：

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

以下是相关属性及其选项：

enter image description here

结果：

enter image description here

Answer 3

<%@ 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>

Answer 4

您只需将CalendarExtender的显示模式更改为月份。

第1步。将OnClientShown事件添加到CalendarExtender即

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

第2步。处理OnClientShown事件以切换日历模式，即

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

在ajax工具包日历扩展器中仅显示月份和年份

4 个答案: