最近要用到日曆控件剛開始是使用梅花雨3.0不過發現了一些彈出的快慢還有定位的問題.總是有點麻煩.另外我是處於一個隱藏層內所以會有很多問題. 這個時候研究了下discuznt.net看到他們投票裏面有一個很好的JS控件,內容如下
文件名爲:calendar.js
var is_ie = document.all ? true : false;var is_ff = window.addEventListener ? true : false;//得到控件的絕對位置
function getposition(id) {
e = document.getElementById(id); var t=e.offsetTop; var l=e.offsetLeft;
while(e=e.offsetParent) {
t+=e.offsetTop; l+=e.offsetLeft;
} var r = new Array(); r['x'] = l; r['y'] = t; return r;
}//debugdocument.write('<div id="jsdebug"></div>');function d(e) { s = ''; for(k in e) { t = typeof e[k]; s += t+' : <b>'+k+' :</b> '+e[k]+'<br>'; } document.getElementById('jsdebug').innerHTML = s;}/***********************************************************************************************************************/var controlid; //控件 日曆數值顯示， 絕對位置定位var currdate = null; //當前初始化時間 默認爲本地時間var startdate = null; //日期範圍 - 開始日期var enddate = null; //日期範圍 - 截止日期var yy = null; //年var mm = null; //月var i; //列var j; //行var currday = null; //今天var today = new Date(); //當前時間today.setHours(0);today.setMinutes(0);today.setSeconds(0);today.setMilliseconds(0);// pasedate('2005-1-2') 返回date對象function parsedate(s){ if(s == ''){ return false;}; var reg=new RegExp("[^0-9-]","") if(s.search(reg)>=0)return today; var ss=s.split("-"); if(ss.length!=3)return today; if(isNaN(ss[0])||isNaN(ss[1])||isNaN(ss[2]))return today; return new Date(parseFloat(ss[0]),parseFloat(ss[1])-1,parseFloat(ss[2]));}function setdate(d){ document.getElementById('calendardiv').style.display = 'none'; controlid.value = yy + "-" + (mm+1) + "-" + d;}function myCancelBubble(event) { e = event ? event : window.event ; if(is_ff) { e.stopPropagation(); } else if(is_ie) { e.cancelBubble = true; }}function initcalendar(){ //當前時間 s = '<style>'; s += '#calendardiv{background-color:#FFFFCC;cursor:default}'; s += '#calendardiv a{color:#333333;text-decoration:none;}'; s += '#calendardiv table{border:1px solid #333333}'; s += '.expire, .expire a{color:#ccc;}'; s += '.default, .default a{color:#333333}'; s += '.checked, .checked a{font-weight:bold;}'; s += '.today{color:#ffcc00}'; s += '</style>'; s += '<div id="calendardiv" style="display:none;position:absolute;" οnclick="myCancelBubble(event)">'; s += '<table cellpadding="2" cellspacing="4">'; s += '<tr><td colspan="7"><table width="100%" style="border:0px" align="center"><tr><td id="prev" align="center"><a href="javascript:drawcalendar(yy-1,mm);" title="上一年"><img src="../../images/page/first.gif" border="0" width="9" height="8" /></a>  <a href="javascript:drawcalendar(yy,mm-1);" title="上個月"><img src="../../images/page/prev.gif" border="0" width="8" height="8" /></a></td><td colspan="5" id="yyyymm" align="center"></td><td id="next" align="center"><a href="javascript:drawcalendar(yy,mm+1);" title="下個月"><img src="../../images/page/next.gif" border="0" width="8" height="8" /></a>  <a href="javascript:drawcalendar(yy+1,mm);" title="下一年"><img src="../../images/page/last.gif" border="0" width="9" height="8" /></a></td></tr></table></td></tr>'; //s += '<tr><td id="prev"> </td><td colspan="5" id="yyyymm" align="center"></td></tr>'; s += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'; for(i=0; i <6; i++){ s += "<tr>"; for(j=1; j<=7; j++) s += "<td id=d"+(i*7+j)+" height="19">0</td>"; s += "</tr>"; } s += '</table>'; s += '</div>'; document.write(s); currday = currdate ? currdate : today;// 默認爲本地時間 //點擊隱藏 document.onclick = function() { document.getElementById('calendardiv').style.display = 'none'; }}function showcalendar(event, controlid1, startdate1, enddate1, defday){ // 判斷controlid position controlid = document.getElementById(controlid1); startdate = parsedate(document.getElementById(startdate1).value); enddate = parsedate(document.getElementById(enddate1).value); defday = parsedate(defday); var p = getposition(controlid1); document.getElementById('calendardiv').style.display = 'block'; document.getElementById('calendardiv').style.left = p['x']; document.getElementById('calendardiv').style.top = p['y'] + 20; myCancelBubble(event); drawcalendar(defday.getFullYear(),defday.getMonth());}// 刷新日曆function drawcalendar(y, m){ var x = new Date(y, m, 1); var mv = x.getDay(); var d = x.getDate(); var de = null; // 單元格對象 yy = x.getFullYear(); mm = x.getMonth(); document.getElementById("yyyymm").innerHTML = yy + "." + (mm+1 > 9 ? mm+1 : "0" + (mm+1)); //將1號以前的單元設置爲空 for(var i=1; i<=mv; i++){ de = document.getElementById("d"+i); de.innerHTML= ""; de.className= ""; } //開始畫當月日曆 while(x.getMonth() == mm){ de = document.getElementById("d"+(d+mv)); if((enddate && x.getTime() > enddate.getTime()) || (startdate && x.getTime() < startdate.getTime())) { de.className = 'expire'; de.innerHTML = d; }else{ de.className = 'default'; de.innerHTML = "<a href=javascript:setdate("+d+");>"+d+"</a>"; } if(x.getTime() == currday.getTime()) { de.className = 'checked'; } if(x.getTime() == today.getTime()) { de.className = 'today'; } x.setDate(++d); } // 尾部空格 while(d + mv <= 42){ de = document.getElementById("d"+(d+mv)); de.innerHTML = ""; de.bgColor = ""; de.className = ""; d++; }}initcalendar();那麼我再default.aspx裏面要引用這個怎麼使用呢.
下面就是default.aspx的前臺代碼
首先再<head></head>標籤內部填入以下(當然這個路徑你要注意哦,我是放在一個目錄下的)
<script language="javascript" type="text/javascript" src="calendar.js"></script>看到這個calendar.js裏面有句function showcalendar(event, controlid1, startdate1, enddate1, defday)
其中controlid1表示要使用這個日曆的空間的ID,startdate1,enddate1,表示指示開始以及指定時間的範圍的空間的ID.defday
這樣我再default.aspx裏面放上三個input,兩個是runat server,因爲我需要取得還有生成開始值
記得後兩個input 爲hidden.
<asp:TextBox ID="enddatetime" runat="server" onClick="showcalendar(event, 'enddatetime', 'cal_startdate', 'cal_enddate','cal_enddate')"></asp:TextBox> <input type="hidden" name="cal_startdate" runat="server" id="cal_startdate"/><input type="hidden" name="cal_enddate" id="cal_enddate" runat="server" />
那麼我在default.aspx.cs裏面生成初始值也就是當前的值
protected void Page_Load(object sender, EventArgs e) { cal_startdate.Value = DateTime.Now.Year.ToString() + "-" + DateTime.Now.Month.ToString() + "-" + DateTime.Now.Day.ToString(); }
ok run一下,發現在當前值之前的日期始灰色不可選取的.哈哈.就這樣了.我喜歡這個效果,特別始放在投票裏面