|
|
TargetControlID：日期輸入的目標(biāo)控件ID，一般來(lái)說(shuō)都都是一個(gè)文本框。
Format：日期格式，如yyyy-MM-dd。
PopupButtonID：用戶打開(kāi)日期選擇面板的控件ID，如按鈕，圖片等。
PopupPosition：設(shè)置日期選擇面板打開(kāi)的位置，這個(gè)是相對(duì)于TargetControlID所在控件的位置的。有幾個(gè)可選的值：BottomLeft，BottomRight，Left，Right，TopLeft，TopRight。
一般來(lái)說(shuō)我們只需要設(shè)置這幾個(gè)屬性就可以滿足應(yīng)用了，除非你想自定義日期選擇面板的顯示樣式，這時(shí)你需要自己給定CssClass。這里是一個(gè)例子。
復(fù)制代碼 代碼如下:
<ASP:TextBox ID="tbBeginTime" runat="server" CssClass="singleText" MaxLength="10" Width="90"></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>
網(wǎng)上有人說(shuō)這個(gè)控件打開(kāi)的日期選擇面板會(huì)被下拉列表?yè)踝?，好像在早期的版本中?huì)存在這個(gè)問(wèn)題，現(xiàn)在新的版本已經(jīng)修正了這個(gè)bug。我所遇到的問(wèn)題是在ModelPopupExtender控件中使用CalendarExtender，日期選擇面板會(huì)被后面的ModelPopupExtender擋住。有關(guān)ModelPopupExtender的使用讀者可以看看官方網(wǎng)站的例子，很簡(jiǎn)單，這里我就不多說(shuō)了。看一下問(wèn)題的截圖。
看到了吧！CalendarExtender彈出的日期選擇面板被后面的ModelPopupExtender擋住了。我在Google上搜了一些資料，大多都是講怎么重新設(shè)置CalendarExtender控件的樣式，指定層的z-inde屬性等，但我嘗試過(guò)都失敗了，其中有人說(shuō)在IE6下測(cè)試是可以的，不過(guò)我沒(méi)有驗(yàn)證過(guò)，因?yàn)槲椰F(xiàn)在也找不到裝有IE6的機(jī)器了，沒(méi)有環(huán)境，自然測(cè)不了。 其實(shí)在FireFox下用Firebug查看頁(yè)面生成的html，你會(huì)看到ModelPopupExtender樣式中的z-index和CalendarExtender是相同的，這估計(jì)是Ajax Toolkit控件中的一個(gè)bug，應(yīng)該所有類似于這樣的控件都會(huì)存在這個(gè)問(wèn)題，即在層上打開(kāi)層，后打開(kāi)的層會(huì)被之前的層擋住，因?yàn)樗鼈兊膠-index都是相同的。想要日期輸入面板不被后面的“模式對(duì)話框”擋住，只能是將它的z-index設(shè)得更大點(diǎn)，但是單純的css修改又沒(méi)有效果，因?yàn)檫@個(gè)日期輸入面板是動(dòng)態(tài)生成的，伴隨著里面的css，所以你預(yù)先設(shè)置它的樣式是沒(méi)有用的，除非你修改控件的源代碼。
后來(lái)在網(wǎng)上查到了一個(gè)資料，其實(shí)CalendarExtender控件有幾個(gè)客戶端事件可以用，其中有一個(gè)OnClieckShown，是在日期輸入面板打開(kāi)后觸發(fā)的，于是我們可以從這里下手，通過(guò)腳本來(lái)設(shè)置z-index的值。下面是代碼。
復(fù)制代碼 代碼如下:
<script type="text/Javascript">
// Ensure the calendar panel was shown on the top level.
function calendarShown(sender, args) { sender._popupBehavior._element.style.zIndex = 1000005; }
</script>
原本ModelPopupExtender的z-index值就已經(jīng)很高了，這恐怕是控件的設(shè)計(jì)者擔(dān)心它會(huì)被其它層擋住的原因吧。我們將日期選擇面板的z-index值再設(shè)高一點(diǎn)，然后在控件中添加OnClientShown="calendarShown"，保存后重新查看頁(yè)面。
一切搞定！看來(lái)CalendarExtender控件提供的幾個(gè)腳本事件還是很有用的，讀者可以自己去研究下其它幾個(gè)腳本事件的用途。還有一個(gè)需要注意的地方，CalendarExtender控件雖然提供了一個(gè)非常棒的日期輸入功能，但是它本身并不對(duì)目標(biāo)控件中的值進(jìn)行驗(yàn)證。例如那個(gè)文本框，用戶是可以手動(dòng)填寫(xiě)內(nèi)容的，這時(shí)CalendarExtender并不對(duì)其中的值進(jìn)行校驗(yàn)，除非你將文本框設(shè)置為只讀，這時(shí)又會(huì)有一個(gè)問(wèn)題，那就是用戶如何清除里面的值呢？看來(lái)還需要自己寫(xiě)代碼驗(yàn)證一下文本框里的值。結(jié)合上面給出的代碼，我們可以在給文本框添加一個(gè)客戶端onblur事件，當(dāng)它失去焦點(diǎn)的時(shí)候，驗(yàn)證其中的值。下面是用來(lái)進(jìn)行驗(yàn)證的js代碼。 復(fù)制代碼 代碼如下:
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("輸入日期的格式不正確！");
Inobj.value = "";
Inobj.focus();
}
}
}
//移除字符串中的空格
function trim(s) {
var s2="";
for(i=0;i<s.length;i++) {
if(s.charAt(i)!=" ") s2=s2+s.charAt(i);
}
return s2;
}
然后在文本框中添加onblur="CheckDate(this);"。這樣，當(dāng)用戶輸入非法值后，程序提示用戶然后清空其中的值。
AspNet技術(shù)：完美解決在ModalPopupExtender中使用CalendarExtender時(shí)被層遮擋的問(wèn)題，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
