最近需要用到日历控件,本来偶自己有一个写好了的,可是不知道为什么ie7下面好好的,到了ie8就不能正常显示出来,老报错说缺少对象,又定位不出来缺少的是啥米对象... - =
着急,就上网想搜个现成的控件,发现了梅花雨。其他版本的也大多是在梅花雨基础上改写的。
用了一下,不错蛮好用,就是中文版本的偶不得不从头都改一遍搞成英文。还有颜色跟我的网页忒不相称于是自己换了颜色.... - =
本来还想把月份换成英文单词的,可是一下子不知道该怎么换,时间也比较紧于是先凑合用数字吧!orz
昨儿花了不少时间想把返回的日期格式改成美式的mm-dd-yyyy的格式,可是怎么都不行...Orz 因为那个正则表达式偶不会写,也没找到....(┬_┬) 纠结了良久最后还是顺从原来的格式了...... orz
.net里面用。看很多人都说在.net里面用要改什么改什么,结果偶折腾一圈发现只需要要最基础的引入js文件的声明就ok了.... - = 使用方式同介绍。只不过,我们大部分用的都是服务器控件罢了。
最基础的就是 <asp:TextBox runat="server" οnfοcus="calendar()" ></asp:TextBox>
如果想加按钮就<asp:TextBox runat="server" ID="txt" οnfοcus="calendar()" ></asp:TextBox>
<img id="img" οnclick="calendar(document.form1.txt)" src="../images/cal.gif" style="cursor: hand" />
嗯,我用的图片做按钮 hiahia~
因为有的输入框在某些条件下要求是只读不能更改日期,于是套了一层函数在调用日历的外面。判断符合条件后才允许它改日期。
本来有点惴惴不安不知道能不能行,后来发现挺好用的只要把当前对象传进去就行啦~ 哈哈~
eg:<img id="imgRBDate" alt="Please select Reply Back Date.." οnclick="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 οnfοcus="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: meizz@hzcnc.com
Web Calendar ver 2.0 Author: walkingpoison(水晶龙) mail: wayx@kali.com.cn http://expert.csdn.net/Expert/TopicView1.asp?id=1264734
Web Calendar ver 1.0 Author: meizz(梅花雪疏影横斜) mail: meizz@hzcnc.com http://expert.csdn.net/Expert/TopicView1.asp?id=1080595
在此我要特别感谢 walkingpoison(水晶龙) 和 emu(ston) 的大力支持,再次感谢!! 调用日历的代码示例Web Calendar 的第一种调用方法:
代码:<input οnfοcus="calendar()">
Web Calendar 的第二种调用方法:
代码:<input name="txt" οnfοcus="calendar()"><input type=button value=calendar οnclick="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 οnfοcus="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() 事件时,请加上上面这句代码(这句代码日历控件里已存在), 这句代码是当你点 | |
|