Custom AjaxControlToolkit (2): Add CalendarExtender to the removal function

In the custom AjaxControlToolkit (1): Make a calendarextender correspond to the last of the N textbox, in order to show the theme, I posted a screenshot, perhaps we noticed that the bottom right corner of my screenshot has a "clear" button, This is the change to be covered in this article.

In our project, most of the text boxes for the date of entry are not allowed to lose the user's hand, only through the click-Popup Date Selection box to choose, so that you can avoid annoying check action, of course, you can also use MaskedEdit filter, but the feeling is not necessary, there is a date control, it is not so complicated, the other , most of the code in the project was previously written, and there was no maskededit available, and a read-only method was used to limit the date text box.

Because the text box is read-only, so long as the user chooses a date, there is no way to make this text box empty, most of the time, this is not a problem, but in a few pages, this is quite annoying, more importantly, the previous control has this function, the user has been accustomed to this operation, and now suddenly told the use of You can't empty it, it's not very convincing. And from the point of view of system design, the text box is originally allowed to be empty, and the default is empty, then after choosing a date, there is no way to restore it to the null state, nor reasonable.

So I think it's necessary to add a purge to CalendarExtender so it can empty the target text box.

The empty action is very simple, but it is tricky to show it correctly. First, understand the Calendarbehavior class display method: First there is a _popupdiv property, it is the carrier of the entire control, other controls are attached to the Div, and the bottom of the "Today" part, is directly attached to the total carrier _popupdiv, Because there is only one control at the bottom, it can certainly do so, but now to add a button on the right side of it, you need to change this behavior: Add a _footer layer as the carrier of the bottom control, the today date as a child control attached to the _footer above, and then add a _ Clearbutton control, also attached to _footer. The code to implement this process is as follows:

1. Add Private properties:

This._clearbutton = null;

This._footer = null;

2. In the _buildfooter method, rewrite the presentation of the _today:

　　　 _buildfooter:function () {///<summary>///builds the footer for the calendar/// </summary> this._footer = $common. Createelementfromtemplate ({nodename: "div", pr Operties: {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_tod


　　　　　　　 Ay "]}, 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); },