六个JS日历控件打包发布(51ascx.com)

 

在进行开发的过程中，经常需要输入时间，特别是在进行查询、统计的时候，时间限定更为重要。

      尽管ASP.NET也集成了日历控件，但是其集成的代码量很大，你可以做一个测试，当你在页面使用一个日历控件时，在发布之后查看该页面的源代码，你会惊奇发现，日历控件的代码量很庞大，这就大大增加的带宽的开销，每当一个客户端请求这个页面，服务器都要将如此庞大的代码进行发送，使得服务器负担加重。而且，ASP.NET集成的日历控件用起来不是很方便，其效果并非我们所想要。所以，大部分人还是选择了JS日历控件，也有很多人从事这方面的研究。在这里将我收藏的几种JS日历控件推荐给大家，附有JS源代码，希望给你带来一丝帮助。

这几个控件的特点是都没有用CSS和图片，只一个JS文件

 

 

 

 

在这6个控件里都对应着自己的JS，为了方便大家看，我把JS文件后面都加了数字

Calendar1.js

第一个控件使用方法：首先添加JS引用

<script src="../JS/calendar1.js" mce_src="JS/calendar1.js" type="text/javascript">script>  

然后在TextBox控件加入οnfοcus="calendar()"，完整代码如下

时间：<asp:TextBox ID="TextBox1" οnfοcus="calendar()" runat="server">asp:TextBox>  

 

这样就OK了

其他的控件也都一样，都要加入JS 引用，我就不多说了，

这里我只把调用方式写出来

第二个

<asp:TextBox ID="TextBox1" οnfοcus="setday(this)" runat="server">asp:TextBox>  

第三个

<input name="control_date" type="text" id="control_date" size="10" maxlength="10" οnclick="new Calendar().show(this);" readonly="readonly" /> <input type="button" name="button" id="button" value="button" οnclick="new Calendar().show(this.form.control_date);" />  

第四个

<input type="text" name="time1" id="time1" οnclick="MyCalendar.SetDate(this)" value="2006-8-1" /> <input type="text" name="time2" id="time2" value="2006-8-1" /> <input name="" type="button" οnclick="MyCalendar.SetDate(this,document.getElementById('time2'))" value="选择" />  

第五个

普通调用:<input type="text" name="txt2" οnfοcus="c.showMoreDay = false;c.show(this);" /><br /> <div style="height: 262px"> div> 按钮调用:<input type="text" name="btntxt" id="btntxt" /><input name="button" value="*" id="button" type="button" οnclick="c.showMoreDay = true;c.show(getObjById('btntxt'),'1982-1-1',this)" /> <br /> <input type="text" name="btntxt3" id="btntxt3" /><input name="button3" value="*" id="button3" type="button" οnclick="c.showMoreDay = true;c.show(this,getObjById('btntxt3'))" />  

第六个

<input type="text" name="txtdate1" /><a href="javascript:show_calendar('form1.txtdate1');" mce_href="javascript:show_calendar('form1.txtdate1');" οnmοuseοver="window.status='Date Picker';return true;" οnmοuseοut="window.status='';return true;"><img alt="日期" src="images/calendar.gif" mce_src="images/calendar.gif" style="border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none" mce_style="border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none" />a>  

下载地址：http://www.51ascx.com/196.html