梅花雨日期控件
這個日歷可以用的方法很多的。除了演示的功能之外，還有各方面應用的潛力。
嗯，再次感謝作者。
原文: http://www.meizz.com/web/html/calendar30.htm
演示: http://www.aspxuexi.com/up_files/File/calendar30.htm
?
版本描述
Web Calendar ver 3.0 是綜合 JavaScript DHTML HTML CSS 的產品，且封裝在 WebCalendar 實例中，調用與設置都非常方便
Web Calendar ver 3.0 新加的功能：
1．對日歷控件的對象式編程
2．對不同瀏覽器的兼容
3．對日歷控件的樣式顏色設置
4．對是否返回時分秒的設置
5．對年份下拉框的年跨度值的設置
6．增加了用方向鍵快捷鍵選擇年月
7．增加了日歷對網頁空間的自適應顯示
8．對日歷日期顯示機制的全新設計
Web Calendar ver 3.0 Author: meizz(梅花雪疏影橫斜) mail: meizz@hzcnc.com
Web Calendar ver 2.0 Author: walkingpoison(水晶龍) mail: wayx@kali.com.cn
Web Calendar ver 1.0 Author: meizz(梅花雪疏影橫斜) mail: meizz@hzcnc.com
在此我要特別感謝 walkingpoison(水晶龍) 和 emu(ston) 的大力支持，再次感謝！！
標準調用示例
<script language="JavaScript" src="calendar.js"></script>
注：下面這段日歷定制的 JavaScript 代碼你可以一個都不定義，使用其默認值
<script language="JavaScript"><!--
WebCalendar.yearFall = 50; //定義年下拉框的年差值
WebCalendar.format = "yyyy-mm-dd" | "2003-06-07"; //回傳日期的格式
WebCalendar.timeShow = false | true; //是否返回時間
WebCalendar.drag = true | false;//是否允許拖動
WebCalendar.darkColor = "#0000D0"; //控件的暗色
WebCalendar.lightColor = "#FFFFFF"; //控件的亮色
WebCalendar.btnBgColor = "#FFFFF5"; //控件的按鈕背景色
WebCalendar.wordColor = "#000080"; //控件的文字顏色
WebCalendar.wordDark = "#DCDCDC"; //控件的暗文字顏色
WebCalendar.dayBgColor = "#E6E6FA"; //日期數字背景色
WebCalendar.todayColor = "#FF0000"; //今天在日歷上的標示背景色
WebCalendar.DarkBorder = "#D4D0C8"; //日期顯示的立體表達色
//--></script>
<input οnfοcus="calendar()">
Web Calendar 里的自定義函數名及其說明
函數名 函數的用途說明（在主頁面里自定義函數時請不要與以下的函數名沖突）
calendar() 用戶的主調函數
writeIframe() 對iframe進行初始化
WebCalendar() 初始化日歷的設置
funMonthSelect() 月份的下拉框
funYearSelect() 年份的下拉框
prevM() 往前翻月份
nextM() 往后翻月份
prevY() 往前翻 Year
nextY() 往后翻 Year
hiddenSelect() 隱藏年份與月份的下拉框
hiddenCalendar() 隱藏日歷控件
appendZero(n) 日期自動補零程序
dayMouseOver() 日歷里日期的 onmouseover 事件
dayMouseOut() 日歷里日期的 onmouseout 事件
writeCalendar() 對日歷顯示數據的核心處理程序
returnDate() 根據日期格式等返回用戶選定的日期
document.onclick() if(WebCalendar.eventSrc != window.event.srcElement) hiddenCalendar();
若你要使用主網頁的 document.onclick() 事件時，請加上上面這句代碼（這句代碼日歷控件里已存在），
這句代碼是當你點擊日歷以外的地方時日歷自動關閉，若不使用 document.onclick() 事件就不需要再定義了．
代碼體:
<!--
document.write("<div id=meizzCalendarLayer style='position: absolute; z-index: 9999; width: 144; height: 193; display: none'>");
document.write("<iframe name=meizzCalendarIframe scrolling=no frameborder=0 width=100% height=100%></iframe></div>");
function writeIframe()
{
var strIframe = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312'><style>"+
"*{font-size: 12px; font-family: 宋體}"+
".bg{ color: "+ WebCalendar.lightColor +"; cursor: default; background-color: "+ WebCalendar.darkColor +";}"+
"table#tableMain{ width: 142; height: 180;}"+
"table#tableWeek td{ color: "+ WebCalendar.lightColor +";}"+
"table#tableDay td{ font-weight: bold;}"+
"td#meizzYearHead, td#meizzYearMonth{color: "+ WebCalendar.wordColor +"}"+
".out { text-align: center; border-top: 1px solid "+ WebCalendar.DarkBorder +"; border-left: 1px solid "+ WebCalendar.DarkBorder +";"+
"border-right: 1px solid "+ WebCalendar.lightColor +"; border-bottom: 1px solid "+ WebCalendar.lightColor +";}"+
".over{ text-align: center; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF;"+
"border-bottom: 1px solid "+ WebCalendar.DarkBorder +"; border-right: 1px solid "+ WebCalendar.DarkBorder +"}"+
"input{ border: 1px solid "+ WebCalendar.darkColor +"; padding-top: 1px; height: 18; cursor: hand;"+
" color:"+ WebCalendar.wordColor +"; background-color: "+ WebCalendar.btnBgColor +"}"+
"</style></head><body onselectstart='return false' style='margin: 0px' οncοntextmenu='return false'><form name=meizz>";
if (WebCalendar.drag){ strIframe += "<scr"+"ipt language=javascript>"+
"var drag=false, cx=0, cy=0, o = parent.WebCalendar.calendar; function document.onmousemove(){"+
"if(parent.WebCalendar.drag && drag){if(o.style.left=='')o.style.left=0; if(o.style.top=='')o.style.top=0;"+
"o.style.left = parseInt(o.style.left) + window.event.clientX-cx;"+
"o.style.top = parseInt(o.style.top) + window.event.clientY-cy;}}"+
"function document.onkeydown(){ switch(window.event.keyCode){ case 27 : parent.hiddenCalendar(); break;"+
"case 37 : parent.prevM(); break; case 38 : parent.prevY(); break; case 39 : parent.nextM(); break; case 40 : parent.nextY(); break;"+
"case 84 : document.forms[0].today.click(); break;} window.event.keyCode = 0; window.event.returnValue= false;}"+
"function dragStart(){cx=window.event.clientX; cy=window.event.clientY; drag=true;}</scr"+"ipt>"}
strIframe += "<select name=tmpYearSelect οnblur='parent.hiddenSelect(this)' style='z-index:1;position:absolute;top:3;left:18;display:none'"+
" οnchange='parent.WebCalendar.thisYear =this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+
"<select name=tmpMonthSelect οnblur='parent.hiddenSelect(this)' style='z-index:1; position:absolute;top:3;left:74;display:none'"+
" οnchange='parent.WebCalendar.thisMonth=this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+
"<table id=tableMain class=bg border=0 cellspacing=2 cellpadding=0>"+
"<tr><td width=140 height=19 bgcolor='"+ WebCalendar.lightColor +"'>"+
" <table width=140 id=tableHead border=0 cellspacing=1 cellpadding=0><tr align=center>"+
" <td width=15 height=19 class=bg title='向前翻 1 月 快捷鍵：←' style='cursor: hand' οnclick='parent.prevM()'><b><</b></td>"+
" <td width=60 id=meizzYearHead title='點擊此處選擇年份' οnclick='parent.funYearSelect(parseInt(this.innerText, 10))'"+
" οnmοuseοver='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+
" οnmοuseοut='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+
" <td width=50 id=meizzYearMonth title='點擊此處選擇月份' οnclick='parent.funMonthSelect(parseInt(this.innerText, 10))'"+
" οnmοuseοver='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+
" οnmοuseοut='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+
" <td width=15 class=bg title='向后翻 1 月 快捷鍵：→' οnclick='parent.nextM()' style='cursor: hand'><b>></b></td></tr></table>"+
"</td></tr><tr><td height=20><table id=tableWeek border=1 width=140 cellpadding=0 cellspacing=0 ";
if(WebCalendar.drag){strIframe += "οnmοusedοwn='dragStart()' οnmοuseup='drag=false' οnmοuseοut='drag=false'";}
strIframe += " borderColorLight='"+ WebCalendar.darkColor +"' borderColorDark='"+ WebCalendar.lightColor +"'>"+
" <tr align=center><td height=20>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table>"+
"</td></tr><tr><td valign=top width=140 bgcolor='"+ WebCalendar.lightColor +"'>"+
" <table id=tableDay height=120 width=140 border=0 cellspacing=1 cellpadding=0>";
for(var x=0; x<5; x++){ strIframe += "<tr>";
for(var y=0; y<7; y++) strIframe += "<td class=out id='meizzDay"+ (x*7+y) +"'></td>"; strIframe += "</tr>";}
strIframe += "<tr>";
for(var x=35; x<39; x++) strIframe += "<td class=out id='meizzDay"+ x +"'></td>";
strIframe +="<td colspan=3 class=out title='"+ WebCalendar.regInfo +"'><input style=' background-color: "+
WebCalendar.btnBgColor +";cursor: hand; padding-top: 4px; width: 100%; height: 100%; border: 0' οnfοcus='this.blur()'"+
" type=button value=' 關閉' οnclick='parent.hiddenCalendar()'></td></tr></table>"+
"</td></tr><tr><td height=20 width=140 bgcolor='"+ WebCalendar.lightColor +"'>"+
" <table border=0 cellpadding=1 cellspacing=0 width=140>"+
" <tr><td><input name=prevYear title='向前翻 1 年 快捷鍵：↑' οnclick='parent.prevY()' type=button value='<<'"+
" οnfοcus='this.blur()' style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==1000)'><input"+
" οnfοcus='this.blur()' name=prevMonth title='向前翻 1 月 快捷鍵：←' οnclick='parent.prevM()' type=button value='< '>"+
" </td><td align=center><input name=today type=button value='今天' οnfοcus='this.blur()' style='width: 50' title='當前日期 快捷鍵：T'"+
" οnclick=/"parent.returnDate(new Date().getDate() +'/'+ (new Date().getMonth() +1) +'/'+ new Date().getFullYear())/">"+
" </td><td align=right><input title='向后翻 1 月 快捷鍵：→' name=nextMonth οnclick='parent.nextM()' type=button value=' >'"+
" οnfοcus='this.blur()'><input name=nextYear title='向后翻 1 年 快捷鍵：↓' οnclick='parent.nextY()' type=button value='>>'"+
" οnfοcus='this.blur()' style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==9999)'></td></tr></table>"+
"</td></tr><table></form></body></html>";
with(WebCalendar.iframe)
{
document.writeln(strIframe); document.close();
for(var i=0; i<39; i++)
{
WebCalendar.dayObj[i] = eval("meizzDay"+ i);
WebCalendar.dayObj[i].onmouseover = dayMouseOver;
WebCalendar.dayObj[i].onmouseout = dayMouseOut;
WebCalendar.dayObj[i].onclick = returnDate;
}
}
}
function TWebCalendar() //初始化日歷的設置
{
this.regInfo = "WEB Calendar ver 3.0 作者：meizz(梅花雪疏影橫斜) 網站：http://www.meizz.com/ 關閉的快捷鍵：[Esc]";
this.regInfo += " Ver 2.0：walkingpoison(水晶龍) Ver 1.0：meizz(梅花雪疏影橫斜)";
this.daysMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
this.day = new Array(39); //定義日歷展示用的數組
this.dayObj = new Array(39); //定義日期展示控件數組
this.dateStyle = null; //保存格式化后日期數組
this.objExport = null; //日歷回傳的顯示控件
this.eventSrc = null; //日歷顯示的觸發控件
this.inputDate = null; //轉化外的輸入的日期(d/m/yyyy)
this.thisYear = new Date().getFullYear(); //定義年的變量的初始值
this.thisMonth = new Date().getMonth()+ 1; //定義月的變量的初始值
this.thisDay = new Date().getDate(); //定義日的變量的初始值
this.today = this.thisDay +"/"+ this.thisMonth +"/"+ this.thisYear; //今天(d/m/yyyy)
this.iframe = window.frames("meizzCalendarIframe"); //日歷的 iframe 載體
this.calendar = getObjectById("meizzCalendarLayer"); //日歷的層
this.dateReg = ""; //日歷格式驗證的正則式
this.yearFall = 50; //定義年下拉框的年差值
this.format = "yyyy-mm-dd"; //回傳日期的格式
this.timeShow = false; //是否返回時間
this.drag = true; //是否允許拖動
this.darkColor = "#0000D0"; //控件的暗色
this.lightColor = "#FFFFFF"; //控件的亮色
this.btnBgColor = "#FFFFF5"; //控件的按鈕背景色
this.wordColor = "#000080"; //控件的文字顏色
this.wordDark = "#DCDCDC"; //控件的暗文字顏色
this.dayBgColor = "#E6E6FA"; //日期數字背景色
this.todayColor = "#FF0000"; //今天在日歷上的標示背景色
this.DarkBorder = "#D4D0C8"; //日期顯示的立體表達色
} var WebCalendar = new TWebCalendar();
function calendar() //主調函數
{
var e = window.event.srcElement; writeIframe();
var o = WebCalendar.calendar.style; WebCalendar.eventSrc = e;
if (arguments.length == 0) WebCalendar.objExport = e;
else WebCalendar.objExport = eval(arguments[0]);
WebCalendar.iframe.tableWeek.style.cursor = WebCalendar.drag ? "move" : "default";
var t = e.offsetTop, h = e.clientHeight, l = e.offsetLeft, p = e.type;
while (e = e.offsetParent){t += e.offsetTop; l += e.offsetLeft;}
o.display = ""; WebCalendar.iframe.document.body.focus();
var cw = WebCalendar.calendar.clientWidth, ch = WebCalendar.calendar.clientHeight;
var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop;
if (document.body.clientHeight + dt - t - h >= ch) o.top = (p=="image")? t + h : t + h + 6;
else o.top = (t - dt < ch) ? ((p=="image")? t + h : t + h + 6) : t - ch;
if (dw + dl - l >= cw) o.left = l; else o.left = (dw >= cw) ? dw - cw + dl : dl;
if (!WebCalendar.timeShow) WebCalendar.dateReg = /^(/d{1,4})(-|//|.)(/d{1,2})/2(/d{1,2})$/;
else WebCalendar.dateReg = /^(/d{1,4})(-|//|.)(/d{1,2})/2(/d{1,2}) (/d{1,2}):(/d{1,2}):(/d{1,2})$/;
try{
if (WebCalendar.objExport.value.trim() != ""){
WebCalendar.dateStyle = WebCalendar.objExport.value.trim().match(WebCalendar.dateReg);
if (WebCalendar.dateStyle == null)
{
WebCalendar.thisYear = new Date().getFullYear();
WebCalendar.thisMonth = new Date().getMonth()+ 1;
WebCalendar.thisDay = new Date().getDate();
alert("原文本框里的日期有錯誤！/n可能與你定義的顯示時分秒有沖突！");
writeCalendar(); return false;
}
else
{
WebCalendar.thisYear = parseInt(WebCalendar.dateStyle[1], 10);
WebCalendar.thisMonth = parseInt(WebCalendar.dateStyle[3], 10);
WebCalendar.thisDay = parseInt(WebCalendar.dateStyle[4], 10);
WebCalendar.inputDate = parseInt(WebCalendar.thisDay, 10) +"/"+ parseInt(WebCalendar.thisMonth, 10) +"/"+
parseInt(WebCalendar.thisYear, 10); writeCalendar();
}
} else writeCalendar();
} catch(e){writeCalendar();}
}
function funMonthSelect() //月份的下拉框
{
var m = isNaN(parseInt(WebCalendar.thisMonth, 10)) ? new Date().getMonth() + 1 : parseInt(WebCalendar.thisMonth);
var e = WebCalendar.iframe.document.forms[0].tmpMonthSelect;
for (var i=1; i<13; i++) e.options.add(new Option(i +"月", i));
e.style.display = ""; e.value = m; e.focus(); window.status = e.style.top;
}
function funYearSelect() //年份的下拉框
{
var n = WebCalendar.yearFall;
var e = WebCalendar.iframe.document.forms[0].tmpYearSelect;
var y = isNaN(parseInt(WebCalendar.thisYear, 10)) ? new Date().getFullYear() : parseInt(WebCalendar.thisYear);
y = (y <= 1000)? 1000 : ((y >= 9999)? 9999 : y);
var min = (y - n >= 1000) ? y - n : 1000;
var max = (y + n <= 9999) ? y + n : 9999;
min = (max == 9999) ? max-n*2 : min;
max = (min == 1000) ? min+n*2 : max;
for (var i=min; i<=max; i++)
{
//alert(e.options.length);
e.options[e.options.length] = new Option(i +"年", i+"", true, true);//e.options.add(new Option(i +"年", i));
}
e.style.display = "";
e.value = y; e.focus();
}
function prevM() //往前翻月份
{
WebCalendar.thisDay = 1;
if (WebCalendar.thisMonth==1)
{
WebCalendar.thisYear--;
WebCalendar.thisMonth=13;
}
WebCalendar.thisMonth--; writeCalendar();
}
function nextM() //往后翻月份
{
WebCalendar.thisDay = 1;
if (WebCalendar.thisMonth==12)
{
WebCalendar.thisYear++;
WebCalendar.thisMonth=0;
}
WebCalendar.thisMonth++; writeCalendar();
}
function prevY(){WebCalendar.thisDay = 1; WebCalendar.thisYear--; writeCalendar();}//往前翻 Year
function nextY(){WebCalendar.thisDay = 1; WebCalendar.thisYear++; writeCalendar();}//往后翻 Year
function hiddenSelect(e){for(var i=e.options.length; i>-1; i--)e.options.remove(i); e.style.display="none";}
function getObjectById(id){ if(document.all) return(eval("document.all."+ id)); return(eval(id)); }
function hiddenCalendar(){getObjectById("meizzCalendarLayer").style.display = "none";};
function appendZero(n){return(("00"+ n).substr(("00"+ n).length-2));}//日期自動補零程序
function String.prototype.trim(){return this.replace(/(^/s*)|(/s*$)/g,"");}
function dayMouseOver()
{
this.className = "over";
this.style.backgroundColor = WebCalendar.darkColor;
if(WebCalendar.day[this.id.substr(8)].split("/")[1] == WebCalendar.thisMonth)
this.style.color = WebCalendar.lightColor;
}
function dayMouseOut()
{
this.className = "out"; var d = WebCalendar.day[this.id.substr(8)], a = d.split("/");
this.style.removeAttribute('backgroundColor');
if(a[1] == WebCalendar.thisMonth && d != WebCalendar.today)
{
if(WebCalendar.dateStyle && a[0] == parseInt(WebCalendar.dateStyle[4], 10))
this.style.color = WebCalendar.lightColor;
this.style.color = WebCalendar.wordColor;
}
}
function writeCalendar() //對日歷顯示的數據的處理程序
{
var y = WebCalendar.thisYear;
var m = WebCalendar.thisMonth;
var d = WebCalendar.thisDay;
WebCalendar.daysMonth[1] = (0==y%4 && (y%100!=0 || y%400==0)) ? 29 : 28;
if (!(y<=9999 && y >= 1000 && parseInt(m, 10)>0 && parseInt(m, 10)<13 && parseInt(d, 10)>0)){
alert("對不起，你輸入了錯誤的日期！");
WebCalendar.thisYear = new Date().getFullYear();
WebCalendar.thisMonth = new Date().getMonth()+ 1;
WebCalendar.thisDay = new Date().getDate(); }
y = WebCalendar.thisYear;
m = WebCalendar.thisMonth;
d = WebCalendar.thisDay;
WebCalendar.iframe.meizzYearHead.innerText = y +" 年";
WebCalendar.iframe.meizzYearMonth.innerText = parseInt(m, 10) +" 月";
WebCalendar.daysMonth[1] = (0==y%4 && (y%100!=0 || y%400==0)) ? 29 : 28; //閏年二月為29天
var w = new Date(y, m-1, 1).getDay();
var prevDays = m==1 ? WebCalendar.daysMonth[11] : WebCalendar.daysMonth[m-2];
for(var i=(w-1); i>=0; i--) //這三個 for 循環為日歷賦數據源（數組 WebCalendar.day）格式是 d/m/yyyy
{
WebCalendar.day[i] = prevDays +"/"+ (parseInt(m, 10)-1) +"/"+ y;
if(m==1) WebCalendar.day[i] = prevDays +"/"+ 12 +"/"+ (parseInt(y, 10)-1);
prevDays--;
}
for(var i=1; i<=WebCalendar.daysMonth[m-1]; i++) WebCalendar.day[i+w-1] = i +"/"+ m +"/"+ y;
for(var i=1; i<39-w-WebCalendar.daysMonth[m-1]+1; i++)
{
WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i] = i +"/"+ (parseInt(m, 10)+1) +"/"+ y;
if(m==12) WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i] = i +"/"+ 1 +"/"+ (parseInt(y, 10)+1);
}
for(var i=0; i<39; i++) //這個循環是根據源數組寫到日歷里顯示
{
var a = WebCalendar.day[i].split("/");
WebCalendar.dayObj[i].innerText = a[0];
WebCalendar.dayObj[i].title = a[2] +"-"+ appendZero(a[1]) +"-"+ appendZero(a[0]);
WebCalendar.dayObj[i].bgColor = WebCalendar.dayBgColor;
WebCalendar.dayObj[i].style.color = WebCalendar.wordColor;
if ((i<10 && parseInt(WebCalendar.day[i], 10)>20) || (i>27 && parseInt(WebCalendar.day[i], 10)<12))
WebCalendar.dayObj[i].style.color = WebCalendar.wordDark;
if (WebCalendar.inputDate==WebCalendar.day[i]) //設置輸入框里的日期在日歷上的顏色
{WebCalendar.dayObj[i].bgColor = WebCalendar.darkColor; WebCalendar.dayObj[i].style.color = WebCalendar.lightColor;}
if (WebCalendar.day[i] == WebCalendar.today) //設置今天在日歷上反應出來的顏色
{WebCalendar.dayObj[i].bgColor = WebCalendar.todayColor; WebCalendar.dayObj[i].style.color = WebCalendar.lightColor;}
}
}
function returnDate() //根據日期格式等返回用戶選定的日期
{
if(WebCalendar.objExport)
{
var returnValue;
var a = (arguments.length==0) ? WebCalendar.day[this.id.substr(8)].split("/") : arguments[0].split("/");
var d = WebCalendar.format.match(/^(/w{4})(-|//|.|)(/w{1,2})/2(/w{1,2})$/);
if(d==null){alert("你設定的日期輸出格式不對！/r/n/r/n請重新定義 WebCalendar.format ！"); return false;}
var flag = d[3].length==2 || d[4].length==2; //判斷返回的日期格式是否要補零
returnValue = flag ? a[2] +d[2]+ appendZero(a[1]) +d[2]+ appendZero(a[0]) : a[2] +d[2]+ a[1] +d[2]+ a[0];
if(WebCalendar.timeShow)
{
var h = new Date().getHours(), m = new Date().getMinutes(), s = new Date().getSeconds();
returnValue += flag ? " "+ appendZero(h) +":"+ appendZero(m) +":"+ appendZero(s) : " "+ h +":"+ m +":"+ s;
}
WebCalendar.objExport.value = returnValue;
hiddenCalendar();
}
}
function document.onclick()
{
if(WebCalendar.eventSrc != window.event.srcElement) hiddenCalendar();
}
//-->
Web Calendar ver 3.0 網頁日歷
?
部分(四)相關異常解決辦法
由于在.net2.0使用的母版頁.在內容頁中使用javascript老是提示找不到控件.查看頁面html源碼發現頁面控件id被.net加入了ContentPlaceHolder控件id.類似ct100_ContentPlaceHolderID_控件名.所以在客戶端調用時因為名稱不對.老是報錯.解決方法如下: 在內容頁加入: <script src="../include/calendar.js" type="text/javascript" language="javascript" charset="gb2312"></script>??? <asp:TextBox ID="txtSTime"? runat="server"></asp:TextBox><input type=button id="hBtnSTime" value="<<"? runat="server" />
??? <asp:TextBox ID="txtETime" runat="server"></asp:TextBox>
??? <input id="hBtnETime" type="button" value=">>" runat="server" /> 在代碼頁加入: string strScript = "calendar(" + txtSTime.UniqueID.ToString() + ")";
??????? hBtnSTime.Attributes["onClick"] = strScript;
??????? strScript = "calendar(" + txtETime.UniqueID.ToString() + ")";
??????? hBtnETime.Attributes["onClick"] = strScript; 注意事項 1,在頁面上去掉以下代碼,否則日期控件工作不正常 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2.調用script時使用字符集為charset="gb2312" 3.使用html服務器端控件,避免顯示日期控件時引發頁面刷新
部分(五)相關控件鏈接(待補充)
http://www.cnblogs.com/mack/articles/40428.aspx
?
總結
- 上一篇： 学习英特尔线程构建模块开源2.1库
- 下一篇： TextPad安装环境配置