站长帮手网,提供专业站长工具、SEO工具  我的博客     留言 
站长帮手网官方QQ群公布
站长招聘平台开通>>>>
 站长工具 | 友情链接检查 | 网站收录查询 | 链接交换平台 | PR查询 | whois查询 | 代码转换工具 | 关键字排名查询 | 站长论坛 | 更多工具
站长帮手网通告: 最新发布工具<网站备案批量查询> 实用工具推荐<PR真假检测><链接检查插件版>   当前共有3万多个网站在链接平台发布>>
 网页死链、坏链检测  交叉友情链接检查  反欺骗友情链接检查  友情链接IP地址批量查询  相同IP地址站点查询
 网站收录查询  网站收录历史查询  源代码查看器  全站PR查询  GG全球数据中心PR查询
 PR查询、假PR检测  关键词地区排名查询  百度、Google关键词排名查询  百度关键字地区top查询  关键词密度检测工具
 Google蜘蛛模拟访问  网站速度测试  搜索引擎模拟抓取工具  外链分析工具  内页收录查询

Javascript日历控件-wpCalendar Ver 2.59 演示及参考

本日历控件为WalkingPoison委托站长帮手网(www.linkhelper.cn)首发,本JS日历控件开源,可免费使用。反馈建议请进>>
查看本站使用Javascript日历控件效果>> 点击下载javascript日历控件脚本文件>>
示例
介绍:这是WalkingPoison根据梅花雨的日历控件修改发展出来的一个日历 Javascript 页面脚本控件,适用于微软的 IE (5.0以上)浏览器,从2.59版本开始支持Firefox浏览器。由于梅花雨本人发布了自己新的日历控件,同时也由于本日历控件代码内核已经与梅花雨本人的控件完全不同,因此本日历控件现命名为wpCalendar。
方式 示例 代码
一: <input type=text id=text1 onfocus="showCalendar(this)" readonly>
二: <input type=text id=text2><input type=button value="Show Calendar" onclick="showCalendar(this,document.all.text2)">
三:  
选择日期以后触发/执行一段代码。这里的例子为使得后面的文本框内容与前面一个相同。
<input type=text id=text3 size=10 onfocus="showCalendar(this,'text4.value=text3.value')"><input type=text size=10 id=text4>
说明:在调用之前,请在代码中引用日历的js文件,代码为:<script language=javascript src="wpCalendar.js"></script>

.net下的出错说明:
有一些朋友反映在.net环境下面会产生出错的现象,这个是因为VS.net自动与VSS连接的过程中,中文代码没能得到正确处理的原因。解决的方法是:选择js文件另存为同名文件,保存的选项选择编码保存,从列表中选择utf-8的编码进行保存即可。
参数设置
参数 当前设置 设置数据 备注
允许移动
日期格式 根据自己的需要还可以设置别的日历输入输出格式。详情请参考编程参考中的datestyle属性setDateStyle方法
宽度|高度 设置日历的宽度|高度(注意:较大的单元格会使日历响应速度变慢)
主题
使用渐变效果 IE5.5以上才可使用
自动测试速度 测试机器速度,以便自动决定是否使用渐变效果。如果选中,则上面的使用渐变效果参数设置将被自动测试结果代替。
编程参考 以下方法和属性均属于wpCalendar对象
方法 说明
close() 关闭日历的函数。
goNextMonth() 日历往后翻一个月。
goNextYear() 日历往后翻一年。
goPrevMonth() 日历往前翻一个月。
goPrevYear() 日历往前翻一年。
redraw() 对日历的重绘函数。在改变日历的任何属性以后,需要调用本函数来重绘日历才能使得设置起作用。
selectToday() 选择日历上的今天。
setDateStyle(datestyle) 设置日期格式的函数,调用此方法将会自动重绘日历。
setMonth(month) 设置日历的月份为month的值,其范围为1~12。
setTheme(themename) 设置日历的主题为themename的值,对应的主题必须存在,否则将使用默认的Classic主题。
setYear(year) 设置日历的年份为year的值,其范围为1000~9999。
setYearMonth(year, month) 设置日历的年月分别为year和month,年月的范围同上。
writeCalendar() 主要的写程序,用于改变日历的年月时改变日历的显示内容。不接受年或者月的参数,年月参数使用wpCalendar的year和month属性。
属性 说明
bmoveable true/false 设置日历是否可以拖动
datestyle 字符串 根据自己的需要设置日历输入输出格式。设置的格式支持"yyyy","MM","M","dd","d",可以随意调整位置,分隔符任意。建议使用setDateStyle方法进行设置。
注意:1.年月日分别最多只能出现一次。
2.日可以没有,但是年月必须有。日没有的情况本控件自动使用当月的1号作为日。
3.本控件不主张使用2位年份,因此不支持"yy"的形式。
4.如果不使用分隔符,则不要采用"M"和"d"的形式,因为即使是人也无法说出"2003112"代表的是"2003-11-2"还是"2003-1-12"
versioninfo 字符串 版本信息
cellwidth 整数 单个单元格的宽度
cellheight 整数 单个单元格的高度
themename 字符串 主题设置,决定日历的外观。主题的名字必须在日历中存在,否则将使用默认的主题。在代码中查找theme对象,或者使用代码for(var key in theme)可以遍历所有的主题。
testspeed true/false 测试机器速度,以便自动决定是否使用Filter。如果设置为true,则下面的playfilter参数设置无效。
testtimeout 整数 测试标准,单位是毫秒,小于这个数值的就认为机器速度足够快
playfilter true/false 设置是否使用Filter效果。只有IE5.5以上才支持这里的效果,如果IE版本小于5.5,这里的设置将无效。
year 4位整数 日历对象内部的年份,如果要赋值,请使用setYear方法。
month 1~12的整数 日历对象内部的月份,如果要赋值,请使用setMonth方法。
ScrollYearOnClick true/false 设置年的下拉选择框内的年份是通过点击还是mouseover来滚动
附注:日历控件的展望(2008-6-26)

  这个日历控件写成于IE一统天下的时代,因此当时不支持其它浏览器是没有什么大问题的。但是经过一段时间的发展,Firefox在互联网迅速崛起,这就使得这个日历越来越成为一个摆设,仅能适用于规定使用IE浏览器的应用系统了。而这时候,其实本人已经没有多大的精力和兴趣再去升级这个日历。但是某一天突然发现,自己公司里的同事在我们的系统里面使用了这个日历控件以前最老的前身版本,觉得日历控件这个东西,还是有使用需求的。于是心血来潮,给这个日历小小的升级了一下,变成了2.59版,虽然跨浏览器的样式还不统一,但至少能用了。

  再次修改这些很久以前完成的代码,顺便重新审视了一下这个控件,觉得这个日历的框架体系还是有不少可以改进的地方。

  • 应当把外观与内核完全分离。目前虽然使用了“主题”概念,但是可定制的自由度不够大,不能对外观进行完全的改变。如果能够完全分离的话,那么让外观交给擅长外观设计的人员去做,而内核本身只负责逻辑,那么就能使得日历更加通用以及更加开放。内核与外观完全分离的另一个好处是外观上的跨浏览器问题可以交给擅长于此的设计人员做。——不过目前没有分离也有一个小小的好处,也就是可以采用单个js文件就实现整个日历的功能。
  • 应当把精力放在提供内核的各种逻辑接口上。丰富的逻辑接口结合外观设计,可能会做到完全超出开发者想象的各种功能。例如,返回值可以实现日期的多选,甚至是一个日期范围。又例如,允许定义节假日,可以设定允许返回的日期的上下限等等。这些都可以帮助实现多样化的需求。
  • 更强大的封装性。目前的JS控件都是往组件化模块化发展,在Ajax逐渐流行起来以后,这就成为趋势。模块化差的代码是无法生存于越来越复杂的JS应用的。这次的2.59版本(写这篇附注时刚完成)则已经开始有所体现。为了实现跨浏览器的支持,已经封装了一些常量和事件的处理机制代码。而从更大的角度来说,这些基础应当成为一个库,而日历则是其上的应用,或者用比较通用的说法,叫做widget。
  • 一个小小的问题:当时发现IE下div会被select和flash等挡住的问题后,便采用了iframe作为载体(为此花了不少精力)。但其实更好的方式是,只需要在div下面再放一层iframe用来挡住select就可以了。
  • 历史版本 Ver 2.59
    修改日期:2008-6-17
  • 1.*修改对Firefox的兼容性,使其可兼容多浏览器(注意:在FF下运行需要将包含js文件的代码放在中)。此版本尚未完善,完善后升级为2.60版
  • 2.存在问题:样式在两个浏览器还不一致;

    Ver 2.55
    修改日期:2007-6-26
  • 1.年份的下拉框增加了可选项,用于决定年份的滚动是通过点击还是mouseover来触发

    Ver 2.54
    修改日期:2006-4-30
  • 1.*将日历单元格的宽度和高度改为变量定义,可以自由定义日历的大小(注意:较大的单元格会使日历响应速度变慢)
  • 2.删除了无用的SELECT样式定义

    Ver 2.53
    修改日期:2005-11-25
  • 1.增加了拖动出iframe的处理,使得拖动的时候更加不容易停下来(但是在出iframe的同时也出了IE窗口的情况会使得日历移动到左上角)
  • 2.增加了日历中翻年月按钮的双击处理,使得点击的响应更快速
  • 3.在日历对象内使用了self变量来访问自身,而不用依赖于外部创建的wpCalendar实例

    Ver 2.52
    修改日期:2004-10-9
  • 1.优化了writeCalendar函数及其它的部分代码(增加了抽象的日期对象)
  • 2.显示的提示改为与输出格式完全一致

    Ver 2.51
    修改日期:2004-9-23, 2004-9-29
  • 1.增加了setYearMonth、setTheme、setYear和setMonth方法,以便外部修改年月的时候调用
  • 2.*重新写了年月的下拉列表,不再使用select控件来选择年月,使得选择年月的操作变得简单
  • 3.增加了Greenbrier主题,删除了无用的Custom主题

    Ver 2.5
    修改日期:2004-7-23
  • 1.调整了属性和方法的名称
  • 2.增加了themename属性,使得使用代码来修改主题更为方便

    Ver 2.5 beta 4
    修改日期:2004-4-16, 2004-5-18
  • 1.*增加了调用的方法,最后一个参数允许是一段代码,用于在点击日历以后可以执行需要的代码。
  • 2.修改了一点注释的笔误以及改进了一点代码效率

    Ver 2.5 beta 3
  • 1.增加主题可以设置的参数,并在日历版本信息中同时显示主题的版本信息
  • 2.将日历的一些方法集成在日历对象内部,以免与外部函数定义形成冲突
  • 3.增加了DiabloII主题,希望各位喜欢^^
  • 4.优化部分代码

    Ver 2.5 beta 2
  • 1.增加鼠标停止在日期上的渐变效果。需要ie5.5以上支持。
  • 2.增加参数设置对以上效果进行自动判断和测试。
  • 3.解决方法一选择日期后产生的焦点小问题。

    Ver 2.5 beta
    修改日期:2003-10-27
  • 1.*修改日历的初始化方法,可以对多种参数进行设置。
  • 2.*引入主题的概念,便于用户选择或者自由定制主题。
  • 3.*控件已经内置了几个主题,用户可根据需要进行选用。

    Ver 2.1+
  • 1.继续修正根据目标在窗口的位置自动调整位置,调整了在窗口右方时的显示问题。

    Ver 2.1
  • 1.修正选择月份后下一月的提示内容错误
  • 2.日历根据输出目标在窗口的位置自动调整显示位置。()
  • 3.*自定义输入输出格式,并修改使得输入和输出的格式统一。
  • 4.增加自定义的样式,可以使用"M"和"d",并且日可以空缺。

    Ver 2.0
    修改日期:2002-12-13
  • 1.*全新修改使用iframe作为日历的载体,不再被select和flash等控件挡住。
  • 2.修正了移植到iframe后移动日历控件的问题。

    Ver 1.5
    修改日期:2002-12-4
  • 1.选中的日期显示为凹下去的样式
  • 2.修改了关闭层的方法,使得失去焦点的时候能够关闭日历。
  • 3.修改按键处理,使得Tab切换焦点的时候可以关闭控件
  • 4.*可以自定义日历是否可以拖动

    Ver 1.4
    修改日期:2002-12-3
  • 1.修正选中年/月份下拉框后按Esc键导致年/月份不显示的问题
  • 2.修正使用下拉框选择月份造成的日期错误(字符串转化为数字的问题)
  • 3.*外观样式的改进,使得控件从丑小鸭变成了美丽的天鹅,从灰姑娘变成了高贵的公主,从……(读者可以自己进行恰当的比喻)
  • 4.再次增大年/月份的点击空间,并对下拉框的位置稍作调整

    Ver 1.3
    修改日期:2002-11-29
  • 1.*空白部分用灰色显示上个月的最后几天和下个月的前几天
  • 2.*每个日期上面加上鼠标提示
  • 3.修改使得当前日期和当前选择的日期的背景色在灰色日期部分也能正常显示

    Ver 1.2
    修改日期:2002-11-28
  • 1.*修改年和月的点击都把中文包含在内,增大点击的空间
  • 2.当前选择的日期在列表中显示不同的背景色
  • 3.修正了点击单元格之间的分隔线导致控件关闭的问题

    Ver 1.1
    修改日期:2002-11-15
  • 1.修正了方法二按Esc键关闭以后再次点击不会显示日历的问题
  • 2.点击today直接选中当前的日期并关闭控件
  • 3.*如果调用控件的输入框含有合法日期,则自动显示输入框的日期部分。
  • 4.修改程序统一使用关闭的函数closeCalendar()来关闭日历控件,这样可以通过自定义关闭函数来完成用户自定义的功能。

    Ver 1.0为原本的梅花雨日历控件

    注:*号表示比较关键的改动
  • © 2008 Designed By 草上飞 QQ:1469886   新书城网上书店   沪ICP备08014007号 带宽支持: