首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery.datePicker年历插件

2012-10-24 
jQuery.datePicker日历插件此datePicker应非jQuery ui中的datepicker插件,名称上虽然只差一个字母的大小写

jQuery.datePicker日历插件

此datePicker应非jQuery ui中的datepicker插件,名称上虽然只差一个字母的大小写。

jQuery ui中的datepicker嵌在整个ui里不太好用,本人系懒人一个,也不善于做剥离代码,说实话,我也不喜欢他收缩显示隐藏的方式,对这些效果真是感觉厌倦了,实用才是第一需要的,所以在网上搜搜寻寻,找到这个插件。

插件源地址:http://www.kelvinluck.com/assets/jquery/datePicker/

原网站给出的datePicker,其实包括两个js文件:datePicker.js与date.js,这个具体的看他原给出的示例就明白,我觉得影响调用,干脆就把2个合成一个(如果你自己从原网站上下要注意和我示例中的不同)。

然后把日历中的英文称改成中文(在函数的最上面,原脚本在date.js中设置),又将Date.firstDayOfWeek=1改成0,把一周第一天为周一,改成周日,再稍微改改其他细节(相信有些脚本基础的都会改改)。

最后压缩了一下,由于源代码注解比较多,一压,原来2个文件加起来50多k,只剩下18k左右,哈哈。还有一个bgiframe脚本,由于日历插件在表单上应用比较多,就非常有可能有下拉菜单, 不用说,ie6的下拉菜单层级无人能敌问题是远近闻名。所以这里又附了一个 jquery.bgiframe.min.js 如示例中的源码:

?

?

如果有下拉菜单在日历控件下,这样再调用一行就ok了。

原网站上的日历外观灰土土的,实在不适合网站上广泛使用,我根据需要改了下,淡蓝色感觉,希望大家喜欢,呵呵,如果个人有需求,直接可以改datePicker.css样式, datePicker在具体示例中的调用:

html:

?

?

?

js:

?

?

?

jsp:

?

?

?

?

clickInput 为选择参数,表示点击input框时,是否显示日历控件, 其他更多参数,和更多调用方法(双日历,或者博客日历模式以及日期选择范围)大家可看原网站上的说明,地址为: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

?

附:有一个小bug:当单选框里的日期为非法时,页面会报错,当然这是人有意测试脚本时才会去手动输入非法日期,一般浏览者都以方便直观的选择日期为主,也期待完美吧。(设置为readonly?)

点击下载此文件 :http://www.cssrain.cn/attachments/month_0906/k2009629144950.rar

66推荐---

my97日历控件:my97主页:http://www.my97.net/dp/index.aspmy97

皮肤:http://www.cssrain.cn/article.asp?id=1343

?

转自:http://www.cnblogs.com/skyaspnet/archive/2010/07/21/1669675.html

热点排行