一个适用于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;" ο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>  &nbsp<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>&nbsp  <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>标签内部填入以下(当然这个路径你要注意哦,我是放在一个目录下的)

看到这个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> 

那么我在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一下,发现在当前值之前的日期始灰色不可选取的.哈哈.就这样了.我喜欢这个效果,特别始放在投票里面

http://blog.csdn.net/xiong1000/archive/2006/08/18/1090595.aspx

一个适用于visual studio 2005的一个js日历控件--zhuan相关推荐

visual studio开发工具的C#主流控件属性一览表
visual studio开发工具的C#主流控件属性一览表 visual studio开发工具的C#主流控件属性一览表详细的介绍了各控制属性的详细中文介绍 C#控件及常用设计整理 1.窗体 1.常 ...
JS日历控件集合----附效果图、源代码
在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为重要. 尽管ASP.NET也集成了日历控件,但是其集成的代码量很大,你可以做一个测试,当你在页面使用一个日历控件时,在发 ...
JS日历控件优化(增加时分秒)
JS日历控件优化在今年7月份时候写了一篇关于 "JS日历控件" 的文章 , 当时只支持年月日的日历控件,现在优化如下: 1. 在原基础上支持 yyyy-mm- ...
JS日历控件不显示2021年问题, 不显示2021年以后的年份，怎么解决？
JS日历控件不显示2021年问题, 不显示2021年以后的年份,怎么解决? //日历 var date_start,date_end,g_object var today = new Date(); ...
一个非常好用的JS日历控件(支持.NET)
今天把一个非常好用的日历控件和大家分享一下,在平时输入日期的时候,往往我们需要达到一个更好的用户体验效果,使用日历控件是一个最佳的选择,这个日历控件非常的美观,是基于js方式的日历控件,而且调用非常的 ...
一个强大的js日历控件 FullCalendar 外加一堆可以直接运行的测试代码拿走不谢
资料地址 FullCalendar官网地址 FullCalendar文档 FullCalendar-v5.5.1在下地址 FullCalendar测试实例免费下载地址: https://downloa ...
js日历控件html,jQuery日历插件sys-calendar.js
插件描述:jQuery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单 sys-calendar.js jquery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单,版 ...
js日历控件，值得收藏，完美支持自定义
My97日期控件一个非常好用的日期控件,功能非常优秀,绝对是你一直想要的日期控件. 演示地址: http://www.my97.net/dp/demo/ 下载1: http://www.cnblog ...
Visual Studio 2005中一个需要小改进的地方
在Solution Explorer中修改Project的名称时,不能自动更改Project所在文件夹的名称,我觉得如果能在更改ProjectProject的名称后,出现一个对话框,让用户选择是否要同 ...

一个适用于visual studio 2005的一个js日历控件--zhuan

一个适用于visual studio 2005的一个js日历控件--zhuan相关推荐

最新文章

热门文章