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

Question

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

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/