打造基于jQuery的日期选择控件(下)

核心提示： picker的点击事件比较长,单独拿出来讲一下我想比较好，第一个要点是显示隐藏事件的处理，打造基于jQuery的日期选择控件(下)(5)，第二个是窗口边缘问题的处理，还有一个就是日期范围规则的处理，有三种方式，也有调用方式的说明：http://jscs.cloudapp.net/Controls

picker的点击事件比较长,单独拿出来讲一下我想比较好，第一个要点是显示隐藏事件的处理，第二个是窗口边缘问题的处理，还有一个就是日期范围规则的处理。

001.function(e)　{
002.//获取当前是否显示
003.　　　　　　　　　　　　　　　　var　isshow　=　$(this).attr("isshow");
004.　　　　　　　　　　　　　　　　　
005.　　　　　　　　　　　　　　　　var　me　=　$(this);
006.　　　　　　　　　　　　　　　　//如果显示着，则隐藏，用于处理点击一下picker显示，再点击picker隐藏的逻辑
007.　　　　　　　　　　　　　　　　if　(cp.css("visibility")　==　"visible")　{
008.　　　　　　　　　　　　　　　　　　　　cp.css("　visibility",　"hidden");
009.　　　　　　　　　　　　　　　　}
010.　　　　　　　　　　　　　　　　//同样是如果显示着
011.　　　　　　　　　　　　　　　　if　(isshow　==　"1")　{
012.　　　　　　　　　　　　　　　　　　　　me.attr("isshow",　"0");
013.　　　　　　　　　　　　　　　　　　　　//remover临时数据，因为是单例所以要表示当前是哪个input
014.　　　　　　　　　　　　　　　　　　　　cp.removeData("ctarget").removeData("cpk").removeData("indata").removeData("onReturn");
015.　　　　　　　　　　　　　　　　　　　　return　false;　//阻止冒泡
016.　　　　　　　　　　　　　　　　}
017.　　　　　　　　　　　　　　　　//如果隐藏着，获取input的值
018.　　　　　　　　　　　　　　　　var　v　=　obj.val();
019.　　　　　　　　　　　　　　　　if　(v　!=　"")　{
020.　　　　　　　　　　　　　　　　　　　　v　=　v.match(dateReg);//验证一下格式是否正确
021.　　　　　　　　　　　　　　　　}
022.　　　　　　　　　　　　　　　　if　(v　==　null　||　v　==　"")　{//格式不正确或为空则用当前日期
023.　　　　　　　　　　　　　　　　　　　　def.Year　=　new　Date().getFullYear();
024.　　　　　　　　　　　　　　　　　　　　def.Month　=　new　Date().getMonth()　+　1;
025.　　　　　　　　　　　　　　　　　　　　def.Day　=　new　Date().getDate();
026.　　　　　　　　　　　　　　　　　　　　def.inputDate　=　null
027.　　　　　　　　　　　　　　　　}
028.　　　　　　　　　　　　　　　　else　{
029.　　　　　　　　　　　　　　　　　　　　//否则使用input的日期
030.　　　　　　　　　　　　　　　　　　　　def.Year　=　parseInt(v[1],　10);
031.　　　　　　　　　　　　　　　　　　　　def.Month　=　parseInt(v[3],　10);
032.　　　　　　　　　　　　　　　　　　　　def.Day　=　parseInt(v[4],　10);
033.　　　　　　　　　　　　　　　　　　　　def.inputDate　=　new　Date(def.Year,　def.Month　-　1,　def.Day);
034.　　　　　　　　　　　　　　　　}
035.　　　　　　　　　　　　　　　　//注册临时数据，因为是单例的缘故
036.　　　　　　　　　　　　　　　　cp.data("ctarget",　obj).data("cpk",　me).data("indata",　def.inputDate).data("onReturn",　def.onReturn);
037.　　　　　　　　　　　　　　　　//调用规则，返回可选的日期范围
038.　　　　　　　　　　　　　　　　if　(def.applyrule　&&　$.isFunction(def.applyrule))　{
039.　　　　　　　　　　　　　　　　　　　　var　rule　=　def.applyrule.call(obj,　obj[0].id);
040.　　　　　　　　　　　　　　　　　　　　if　(rule)　{
041.　　　　　　　　　　　　　　　　　　　　　　　　if　(rule.startdate)　{
042.　　　　　　　　　　　　　　　　　　　　　　　　　　　　cp.data("ads",　rule.startdate);
043.　　　　　　　　　　　　　　　　　　　　　　　　}
044.　　　　　　　　　　　　　　　　　　　　　　　　else　{
045.　　　　　　　　　　　　　　　　　　　　　　　　　　　　cp.removeData("ads");
046.　　　　　　　　　　　　　　　　　　　　　　　　}
047.　　　　　　　　　　　　　　　　　　　　　　　　if　(rule.enddate)　{
048.　　　　　　　　　　　　　　　　　　　　　　　　　　　　cp.data("ade",　rule.enddate);
049.　　　　　　　　　　　　　　　　　　　　　　　　}
050.　　　　　　　　　　　　　　　　　　　　　　　　else　{
051.　　　　　　　　　　　　　　　　　　　　　　　　　　　　cp.removeData("ade");
052.　　　　　　　　　　　　　　　　　　　　　　　　}
053.　　　　　　　　　　　　　　　　　　　　}
054.　　　　　　　　　　　　　　　　}
055.　　　　　　　　　　　　　　　　else　{
056.　　　　　　　　　　　　　　　　　　　　//不存在则删除限制
057.　　　　　　　　　　　　　　　　　　　　cp.removeData("ads").removeData("ade")
058.　　　　　　　　　　　　　　　　}
059.　　　　　　　　　　　　　　　　//画月日历内容td了
060.　　　　　　　　　　　　　　　　writecb();
061.　
062.　　　　　　　　　　　　　　　　$("#BBIT-DP-T").height(cp.height());
063.　　　　　　　　　　　　　　　　//获取显示依附的对象
064.　　　　　　　　　　　　　　　　var　t　=　def.showtarget　||　obj;
065.　　　　　　　　　　　　　　　　//获取对象的位置
066.　　　　　　　　　　　　　　　　var　pos　=　t.offset();
067.　
068.　　　　　　　　　　　　　　　　//获取对象的高度
069.　　　　　　　　　　　　　　　　var　height　=　t.outerHeight();
070.　　　　　　　　　　　　　　　　//日期选择框的位置是依附对象的位置加上本身高度
071.　　　　　　　　　　　　　　　　var　newpos　=　{　left:　pos.left,　top:　pos.top　+　height　};
072.　　　　　　　　　　　　　　　　//以下都是处理窗口边界问题
073.　　　　　　　　　　　　　　　　var　w　=　cp.width();
074.　　　　　　　　　　　　　　　　var　h　=　cp.height();
075.　　　　　　　　　　　　　　　　var　bw　=　document.documentElement.clientWidth;
076.　　　　　　　　　　　　　　　　var　bh　=　document.documentElement.clientHeight;
077.　　　　　　　　　　　　　　　　if　((newpos.left　+　w)　>=　bw)　{
078.　　　　　　　　　　　　　　　　　　　　newpos.left　=　bw　-　w　-　2;
079.　　　　　　　　　　　　　　　　}
080.　　　　　　　　　　　　　　　　if　((newpos.top　+　h)　>=　bh)　{
081.　　　　　　　　　　　　　　　　　　　　newpos.top　=　pos.top　-　h　-　2;
082.　　　　　　　　　　　　　　　　}
083.　　　　　　　　　　　　　　　　if　(newpos.left　<　0)　{
084.　　　　　　　　　　　　　　　　　　　　newpos.left　=　10;
085.　　　　　　　　　　　　　　　　}
086.　　　　　　　　　　　　　　　　if　(newpos.top　<　0)　{
087.　　　　　　　　　　　　　　　　　　　　newpos.top　=　10;
088.　　　　　　　　　　　　　　　　}
089.　　　　　　　　　　　　　　　　//强制默认是月日期视图
090.　　　　　　　　　　　　　　　　$("#BBIT-DP-MP").hide();
091.　　　　　　　　　　　　　　　　newpos.visibility　=　"visible";
092.　　　　　　　　　　　　　　　　cp.css(newpos);　//移动到对应位置并显示
093.　
094.　　　　　　　　　　　　　　　　　$(this).attr("isshow",　"1");
095.　　　　　　　　　　　　　　　　//给document注册单次的click事件，解决打开日期选择器后，点击其他位置，隐藏日期选择器的问题
096.　　　　　　　　　　　　　　　　$(document).one("click",　function(e)　{
097.　　　　　　　　　　　　　　　　　　　　me.attr("isshow",　"0");
098.　　　　　　　　　　　　　　　　　　　　cp.removeData("ctarget").removeData("cpk").removeData("indata");
099.　　　　　　　　　　　　　　　　　　　　cp.css("visibility",　"hidden");
100.　　　　　　　　　　　　　　　　});
101.　　　　　　　　　　　　　　　　　　　　　
102.　　　　　　　　　　　　　　　　return　false;//组织冒泡
103.　　　　　　　　　　　　}

其他一些代码都是日期操作的函数，如上月下月等就不做介绍了，大家如果对代码上又任何问题都可以留言，我一定解答，最后是示例了

第一个示例是老老实实的演示Demo示例，有三种方式，也有调用方式的说明：

http://jscs.cloudapp.net/ControlsSample/dpdemo

第二个示例是我写的日程管理控件中结合datepicker的应用（大家可以先看看这个）

http://xuanye.cloudapp.net/

位置是

和

　

是datepicker在我的创造中的应用，最后如果你觉得这边文章对你有所帮助，那就点击一下【推荐】？

本文的地址：http://www.cnblogs.com/xuanye/archive/2009/10/27/1590992.html