一个适用于visual studio 2005的一个js日历控件--zhuan
最近要用到日历控件刚开始是使用梅花雨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;
}
//debug
document.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;" onclick="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();
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;
}
//debug
document.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;" onclick="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" />
<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();
}
{
cal_startdate.Value = DateTime.Now.Year.ToString() + "-" + DateTime.Now.Month.ToString() + "-" + DateTime.Now.Day.ToString();
}
ok run一下,发现在当前值之前的日期始灰色不可选取的.哈哈.就这样了.我喜欢这个效果,特别始放在投票里面
http://blog.csdn.net/xiong1000/archive/2006/08/18/1090595.aspx