20100826 学习记录：.net中调用的js日历控件

最近需要用到日历控件，本来偶自己有一个写好了的，可是不知道为什么ie7下面好好的，到了ie8就不能正常显示出来，老报错说缺少对象，又定位不出来缺少的是啥米对象... - =

着急，就上网想搜个现成的控件，发现了梅花雨。其他版本的也大多是在梅花雨基础上改写的。

用了一下，不错蛮好用，就是中文版本的偶不得不从头都改一遍搞成英文。还有颜色跟我的网页忒不相称于是自己换了颜色.... - =

本来还想把月份换成英文单词的，可是一下子不知道该怎么换，时间也比较紧于是先凑合用数字吧！orz

 

昨儿花了不少时间想把返回的日期格式改成美式的mm-dd-yyyy的格式，可是怎么都不行...Orz 因为那个正则表达式偶不会写，也没找到....(┬＿┬) 纠结了良久最后还是顺从原来的格式了...... orz

 

.net里面用。看很多人都说在.net里面用要改什么改什么，结果偶折腾一圈发现只需要要最基础的引入js文件的声明就ok了.... - = 使用方式同介绍。只不过，我们大部分用的都是服务器控件罢了。

最基础的就是 <asp:TextBox runat="server"   onfocus="calendar()" ></asp:TextBox> 

如果想加按钮就<asp:TextBox runat="server" ID="txt"  onfocus="calendar()" ></asp:TextBox> 
<img id="img" onclick="calendar(document.form1.txt)" src="../images/cal.gif" style="cursor: hand" />

嗯，我用的图片做按钮 hiahia~

因为有的输入框在某些条件下要求是只读不能更改日期，于是套了一层函数在调用日历的外面。判断符合条件后才允许它改日期。

本来有点惴惴不安不知道能不能行，后来发现挺好用的只要把当前对象传进去就行啦~ 哈哈~

eg：<img id="imgRBDate" alt="Please select Reply Back Date.." onclick="javascript:ShowCalendar('txtReplyByDate');"
                        src="../images/cal.gif" style="cursor: hand" />

 

有空继续纠结那个日期的返回格式....  (┬＿┬)

 

原版下载：

梅花雨日历控件 3.0 

 

梅花雨日历控件3.0的JS源码以及说明文件下载 http://www.meizz.com/web/download/Web_Calendar_30.rar 出处： http://community.csdn.net/Expert/topic/3398/3398406.xml?temp=.9305078 CSDN文档介绍 http://dev.csdn.net/develop/article/15/15245.shtm meizz的专栏 http://blog.csdn.net/meizz/archive/2003/06/09/17130.aspx 英文版 http://blog.csdn.net/athossmth/archive/2005/03/01/306689.aspx 使用技巧： 用记事本打开js文件，然后另存为时候用编码：utf-8！ 把另存的js文件放在一个文件夹里（注意一下路径，可能会找不到） 然后aspx页面上 <script language="JavaScript" src="js/calendar.js"></script> 在控件上这样写 <asp:TextBox id="begintime" runat="server" Width="88px" BorderStyle="Groove" onFocus="calendar()"> 若是html控件 写 <input onfocus="calendar()"> Web Calendar ver 3.0 网页日历     在WEB页面与用户交互时，常常遇到用户输入日期的时候．可是经常发生用户输入的日期格式与你当初设想的出入很大，这时你就要花上很大的精力来验证用户的 日期输入的正确性上．基于这个麻烦的地方，我就着手写了这么一个日历控件，将WEB程序员从日期验证的苦恼中解脱出来．     这个东东是我一个写出来的，有时候考虑得难免不周全，希望大家多多指正，多提一些宝贵的意见和建议．我在这里先谢过大家了！ 版本描述 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: [email protected] Web Calendar ver 2.0 Author: walkingpoison(水晶龙) mail: [email protected] http://expert.csdn.net/Expert/TopicView1.asp?id=1264734 Web Calendar ver 1.0 Author: meizz(梅花雪疏影横斜) mail: [email protected] http://expert.csdn.net/Expert/TopicView1.asp?id=1080595 在此我要特别感谢 walkingpoison(水晶龙) 和 emu(ston) 的大力支持，再次感谢！！ 调用日历的代码示例 Web Calendar 的第一种调用方法： 代码：<input onfocus="calendar()"> Web Calendar 的第二种调用方法： 代码：<input name="txt" onfocus="calendar()"><input type=button value=calendar onclick="calendar(document.form1.txt)"> 对日历控件的定制 定义年下拉框的年跨值（两倍） 定义返回的日期格式（可以用数字，分隔符 - /） 定义是否返回时分秒 定义控件是否能被拖动 控件的暗色 控件的亮色 控件的按钮背景色 控件的文字颜色 控件的暗文字颜色 日期数字背景色 今天在日历上的标示背景色 日期显示的立体表达色 标准调用示例 <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 onfocus="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() 事件时，请加上上面这句代码（这句代码日历控件里已存在）， 这句代码是当你点