定制AjaxControlToolkit（2）：给CalendarExtender增加清除功能

定制AjaxControlToolkit（2）：给CalendarExtender增加清除功能2011-09-06 博客园夏狼哉在定制AjaxControlToolkit（1）：使一个CalendarExtender对应N个TextBox 的最后，为了展示主题，我贴了一张截图，也许大家注意到了，我的截图的右下角有一个“清除”按钮，这就是本文要介绍的更改。

在我们的项目中，大多数的录入日期的文本框是不允许用户手输的，只能通过点击--弹出日期选择框的方式选择，这样可以避免烦人的检查动作，当然也可以用MaskedEdit过滤，不过感觉没必要，有日期控件了，就不弄那么复杂了，另外，项目中大部分代码是以前写的，当时没有MaskedEdit可用，一直以来使用只读的办法来限制日期文本框。

由于文本框只读，所以只要用户一旦选择了某个日期，就没办法使这个文本框变空了，大多数情况下，这并不是问题，但是在少数页面，这一点相当烦人，更重要的是，以前的控件有这个功能，用户已经习惯了这样操作，现在突然告诉用户你没办法清空它，这不怎么有说服力。而且从系统设计的角度讲，那个文本框本来就是允许为空的，而且默认就是空的，后来选择了日期以后，就再也没办法使它恢复到空值状态，也不怎么说得过去。

因此我觉得有必要给CalendarExtender增加清除功能，使它能够清空目标文本框。

清空的动作倒是非常简单，但是要把它正确地显示出来比较棘手。首先，要了解CalendarBehavior类的展示方法：首先有一个_popupDiv属性，它是整个控件的载体，其它的控件都附加在这个div之上；而底部显示“今天”的部分，是直接附加在总载体_popupDiv上的，因为本来底部只有它一个控件，它当然可以这样做，但是现在要在它右侧增加一个按钮，就要改变一下这种行为: 增加一个_footer 层作为底部控件的载体, 把今天日期作为子控件附加到_footer上面, 再增加一个 _clearButton控件, 也附加到_footer上面. 实现这一流程的代码如下:

1. 增加私有属性:

    this._clearButton = null;    this._footer = null;

2. 在_buildFooter方法中, 改写_today的展示方式:

    _buildFooter: function（） {        /// <summary>        /// Builds the footer for the calendar        /// </summary>        this._footer = $common.createElementFromTemplate（{            nodeName: "div",            properties: { id: this.get_id（） + "_footer" },            cssClasses: ["ajax__calendar_footer"]        }, this._popupDiv）;        var todayWrapper = $common.createElementFromTemplate（{ nodeName: "div" }, this._footer）;        this._today = $common.createElementFromTemplate（{            nodeName: "div",            properties: {                id: this.get_id（） + "_today",                mode: "today"            },            events: this._cell$delegates,            //cssClasses: ["ajax__calendar_footer", "ajax__calendar_today"]            cssClasses: ["ajax__calendar_today"]        }, todayWrapper）;        var clearWrapper = $common.createElementFromTemplate（{ nodeName: "div" }, this._footer）;        this._clearButton = $common.createElementFromTemplate（{            nodeName: "div",            properties: {                id: this.get_id（） + "_clearButton",                mode: "clear"            },            events: this._cell$delegates,            cssClasses: ["ajax__calendar_clear"]        }, clearWrapper）;    },