领星动网编程开发之爆炸小宇宙

cnitblog.com/lxasp - - 有一种信念叫做编程
posts - 54, comments - 34, trackbacks - 0, articles - 0

jQuery.thinCal --日历绘制日期时间选取插件

Posted on 2009-08-27 01:24 lxasp 阅读(2166) 评论(3)  编辑 收藏 引用 所属分类: AJAX
到目前为止,jQuery一直都没有一个功能灵活而代码小于10KB的日历显示、日期选取、时间选取三合一功能的插件。因此就只好自己动手写了此插件。

本插件严格控制代码的大小,目前的大小:
source code size: ~8kb , jsmin size: ~4kb

演示地址:
http://www.lxasp.com/jq/demo/datetimecal/calendar-demo2.htm
弹出选取的演示:
http://www.lxasp.com/jq/demo/datetimecal/cluetipDate-demo1.htm

【◆】预先准备:(不由本插件来做)

用DreamWeaver等HTML工具画一个7x7的表格
第一行作为标题,预先填好“日一二三四五六”

使用本插件的必要的网页元素:

◆HTML模板(有按钮、文本、7x7的表格“含标题:日一二三四五六”等)
◆显示本插件的目标DIV和相关CSS

◇这样一来,本插件就自然有了换肤、多语言功能。因为这些都交给使用此插件的开发者去做了,灵活性就当然不在话下了。

【◆】编程思路:(由本插件来做)

①输入一个日期时间(年,月,日,时,分,秒),取得该月的1号是星期几

②在7x7表格从第二行起,按“该月的1号是星期几”填充日期“1”至到该月的最后一天(判断闰年等)


【◆】备注说明:
◆在箭头的按钮上,单击则加减1个数值,长按则连续加减,松开则停止加减
◆本插件输入和输出的日期时间是JavaScript的Date对象


【◆】暂时不会加入的功能:
◆不含日期字符串格式化函数,这个网上有很多版本,自己搜索
◆不会绑定某个input控件,因为有onChanged事件,自己加代码
◆不会作为浮动层弹出或拖动,因为有其他插件(ClueTip、Dialog等)能做到
◆不会验证日期格式的有效性和禁止选择某天,因为有强大的表单验证插件
◆不会加入两个日期范围之间的选择,本插件本身可以在一个页面多次使用
◆不会加入键盘控制功能,因为可以在input里输入和有表单验证插件来控制

Feedback

# re: jQuery.thinCal --日历绘制日期时间选取插件  回复  更多评论   

2009-09-02 09:58 by 凡客诚品
本插件输入和输出的日期时间是JavaScript的Date对象

# re: jQuery.thinCal --日历绘制日期时间选取插件  回复  更多评论   

2009-09-05 21:03 by ugg boots
ding,yes

# re: jQuery.thinCal --日历绘制日期时间选取插件[未登录]  回复  更多评论   

2010-03-20 16:26 by c
这个东西非常实用
只有注册用户登录后才能发表评论。