基于jQuery的日期选择控件

2020-05-22 16:34:24易采站长站整理

if (rule.startdate) {
cp.data(“ads”, rule.startdate);
}
else {
cp.removeData(“ads”);
}
if (rule.enddate) {
cp.data(“ade”, rule.enddate);
}
else {
cp.removeData(“ade”);
}
}
}
else {
cp.removeData(“ads”).removeData(“ade”)
}
writecb();
$(“#BBIT-DP-T”).height(cp.height());
var t = def.showtarget || obj;
var pos = t.offset();
var height = t.outerHeight();
var newpos = { left: pos.left, top: pos.top + height };
var w = cp.width();
var h = cp.height();
var bw = document.documentElement.clientWidth;
var bh = document.documentElement.clientHeight;
if ((newpos.left + w) >= bw) {
newpos.left = bw – w – 2;
}
if ((newpos.top + h) >= bh) {
newpos.top = pos.top – h – 2;
}
if (newpos.left < 0) {
newpos.left = 10;
}
if (newpos.top < 0) {
newpos.top = 10;
}
$(“#BBIT-DP-MP”).hide();
newpos.visibility = “visible”;
cp.css(newpos);
//cp.show();
$(this).attr(“isshow”, “1”);
$(document).one(“click”, function(e) {
me.attr(“isshow”, “0”);
cp.removeData(“ctarget”).removeData(“cpk”).removeData(“indata”);
cp.css(“visibility”, “hidden”);
});
return false;
});
});
};
})(jQuery);

那接着就是分析一下实现的主要过程和一些注意的要点:
首先还是套版化编写jQuery控件的套子:

;(function($) {
//也可以使用$.fn.extend(datepicker:function(o){})
$.fn.datepicker= function(o) {
}
})(jQuery);

这样做的好处上篇已经讲过了 ,就不重述了
接着就是定义默认的参数,已在代码中添加了注释说明这些参数的意义,有几个参数是为了多语言而设置的,如weekName,monthName

var def = {
weekStart: 0,//一周开始的是星期几0代表星期天
weekName: [“日”, “一”, “二”, “三”, “四”, “五”, “六”], //星期的格式
monthName: [“一”, “二”, “三”, “四”, “五”, “六”, “七”, “八”, “九”, “十”, “十一”, “十二”], //月份的格式
monthp: “月”,//月的后缀
Year: new Date().getFullYear(), //定义年的变量的初始值
Month: new Date().getMonth() + 1, //定义月的变量的初始值
Day: new Date().getDate(), //定义日的变量的初始值
today: new Date(),//today
btnOk: ” 确定 “,//确定按钮的文字
btnCancel: ” 取消 “,//取消按钮的文字
btnToday: “今天”, //今天按钮的文字
inputDate: null,//无用,只是在代码中会用它存放数据