You can go to the official website. View the Demo,modalpopupextender control is used to implement the effect of a modal dialog box in a Web page, and the Calendarexterder control provides date input, which has several important properties:
TargetControlID: The target control ID for the date entry is generally a text box.
Format: Date formats, such as YYYY-MM-DD.
PopupButtonID: The user opens the date selection panel's control ID, such as buttons, pictures, and so on.
Popupposition: Sets the location where the date selection panel opens, relative to the position of the control where the TargetControlID is located. There are several optional values: Bottomleft,bottomright,left,right,topleft,topright.
In general we only need to set these properties to meet the application, unless you want to customize the date selection panel display style, then you need to give your own cssclass. Here is an example.
Copy Code code as follows:
<asp:textbox id= "Tbbegintime" runat= "Server" cssclass= "Singletext" "maxlength=" "Width=" ></asp:textbox >
<asp:image id= "Imgbegintime" imageurl= "/upload/2009-11/20091124203311125.png" runat= "Server"/>
<ajaxtoolkit:calendarextender id= "Calendarextenderbegintime" format= "Yyyy-mm-dd" TargetControlID= "TbBeginTime" Popupbuttonid= "Imgbegintime" runat= "Server" >
</ajaxToolkit:CalendarExtender>
Someone on the internet said that the date selection panel opened by this control would be blocked by a drop-down list, as if it existed in an earlier version, and now the new version has fixed the bug. The problem I've encountered is using CalendarExtender in the Modelpopupextender control, and the date selection panel is blocked by the modelpopupextender behind it. Readers of the Modelpopupextender can take a look at the official website example, very simple, here I will not say more. Take a look at the screenshot of the question.
See it! The CalendarExtender pop-up date selection panel is blocked by the rear modelpopupextender. I searched some information on Google, mostly talking about how to reset the style of the CalendarExtender control, specify the Z-inde properties of the layer, and so on, but I tried to fail, and some of them said that it was OK to test under IE6, but I didn't verify it. Because I now also can not find the machine equipped with IE6, no environment, natural measurement can not.
In fact, in Firefox under the Firebug to view the page generated HTML, you will see the Modelpopupextender style in the Z-index and CalendarExtender is the same, which is estimated to be AJAX toolkit control a bug , it should be the problem for all controls like this, that is, to open the layer on the layer, and the open layer will be blocked by the previous layer because their z-index are the same. You want the date Input Panel not to be blocked by the "modal dialog" behind it, it can only be set to a larger point, but the simple CSS changes have no effect, because the date Input Panel is dynamically generated, with the inside of the CSS, so you z-index it's style is no use, Unless you modify the source code of the control.
Later on the Internet to find a data, in fact, CalendarExtender control has several client events can be used, which has a onclieckshown, is the date Input Panel opened after the trigger, so we can start from here, through the script set Z-index value. Here's the code.
Copy Code code as follows:
<script type= "Text/javascript" >
Ensure the calendar panel was shown at the top level.
function Calendarshown (sender, args) {sender._popupbehavior._element.style.zindex = 1000005;}
</script>
The original Modelpopupextender Z-index value is already very high, which I am afraid is the control of the designer worried that it will be blocked by other layers of reason. We set the Z-index value of the date selection panel a little higher, then add onclientshown= "Calendarshown" to the control, and then view the page again after saving.
Everything's done! It seems that several of the scripting events provided by the CalendarExtender control are useful, and readers can explore the use of several other scripting events themselves. There is also a point to note that the CalendarExtender control, while providing a very good date-entry feature, does not validate the value in the target control itself. For example, the text box, users can manually fill in the content, then CalendarExtender does not verify the value, unless you set the text box to read-only, then there will be a problem, that is how the user to clear the value of it? It seems that you need to write your own code to verify the value in the text box. In combination with the code given above, we can add a client onblur event to the text box to validate the value when it loses focus. Here is the JS code used for validation.
Copy Code code as follows:
function Checkdate (inobj) {
Inobj.value = Trim (inobj.value);
if (Inobj.value!= "") {
var reg =/^\d{8}$/;
if (Inobj.value.match (reg)!= null) {
Inobj.value = Inobj.value.substring (0, 4) + "-" + Inobj.value.substring (4, 6) + "-" + Inobj.value.substring (6, 8);
}
reg =/^ ([1-2]\d{3})-(([1][0-2]) | ( 0? [1-9])) -(([3][0-1]) | ([1-2][0-9]) | (0?) [1-9])) $/;
if (Inobj.value.match (reg) = null) {
Alert ("The input date is not in the correct format!") ");
Inobj.value = "";
Inobj.focus ();
}
}
}
Remove a space in a string
function Trim (s) {
var s2= "";
for (i=0;i<s.length;i++) {
if (S.charat (i)!= "") S2=s2+s.charat (i);
}
return S2;
}
Then add onblur= "checkdate (this) to the text box;". This way, when the user enters an illegal value, the program prompts the user and then empties the value.
