jQuery LigerUI 插件介绍及使用之ligerDateEditor

描述:

• 可以将一个'文本框'的表单对象转换成可日期选择。
• 支持精确到小时和分钟
• 支持直接在文本框改日期(会自动验证)

设计思路：

通过观察知道，无论是哪个月，这30左右的天数总会落在7*6的表格上面，

所以只需要知道某月，第N行、第M列应该填入什么样的数字就可以。

按下面的算法就可以计算出来：

步骤一：以本月第一天为基点，计算出第N行、第M列的偏差：先把第一天所在相应的单元格填入0，单元格前面的为负数（递减），后面的为正数（递加）。

可用公式(N-1)*7 + M-D计算（第N行，第M列，D为某月的第一天的星期）

步骤二：负数的，如-N，在上一个月找倒数N天的日期。正数的，全部加一，如果大于本月天数，减去本月天数即可。

这样描述有点抽像啊，以一个例子来做说明吧，这个月是4月，有30天，第一天是星期五，那么就先在第一行星期五的单元格填入0，按单元格从左到右,从上到下的顺序编号，结果如图：

这样上面说的步骤一就完成了，步骤二分为2小步完成：

1， 对于第一行星期五之前负数部分，观察下知道-1替换要成上一个月最后一天，-2、-3依此类推。我们很容易可以知道上个月(3月)有31天，因此就替换成27、28、29、30、31

2， 正数部分就容易处理多了，全部加1，如果大于30天，减去30即可。如图：

例子：

引入库文件：

遵循ligerUI的设计原则（插件尽量单独），ligerDateEditor仅需要一个ligerDateEditor.js，不依赖任何其他js文件。使用时再引入css和jQuery即可。

    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />    <script src="lib/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>

准备HTML:

<input type="text" id="txt2" />

调用：

$("#txt2").ligerDateEditor();

API：

参数名类型描述默认值p{Object}主要参数nullp.width{Int}宽度nullp.format{String}Date格式化"yyyy-MM-dd hh:mm"p.showTime{Bool}是否显示时间falsep.onChangeDate{Function}改变Date事件

• 参数1：Date Value

null

DEMO下载：

ligerUI.Demos.dateEditor

更多UI应用请访问 http://demo.ligerui.com/