基于jQuery的日期选择控件

但是也有些问题,第一画日历有点慢,第二兼容性不太好IE Only,第三它不是基于jQuery的哈哈。

那还是老规矩,做之前先看下效果

 
这下是更酷的Ext风格了。
从上图我们可以看出这个控件其实有两个视图一个日期月视图,还有一个是年月选择视图。
1:还是先从HTML入手

日期控件确定HTML其实还是比较简单,因为明摆着是列表的数据格式,当然主要是采用table了。
两个视图分别用两个Div包裹,控制div的显示隐藏即可以切换视图了。完整的HTMl结构大家可以用IEDeveloper看一下Demo的结构,我自己截了一个图
 
2:根据HTML和效果图编写CSS
其实因为是Ext风格的,所以直接copy的ext的css和图片。。
CSS也就不分析了,直接上代码。
因为博客园的语法高亮不支持CSS,所以就不贴出来了,给个下载地址吧:
所有用到的图片:

3:搞定了CSS之后呢,就开始编写我们javascript了。
上来就是一个完整代码


复制代码 代码如下:

;(function($) {
var userAgent = window.navigator.userAgent.toLowerCase();
$.browser.msie8 = $.browser.msie && /msie 8\.0/i.test(userAgent);
$.browser.msie7 = $.browser.msie && /msie 7\.0/i.test(userAgent);
$.browser.msie6 = !$.browser.msie8 && !$.browser.msie7 && $.browser.msie && /msie 6\.0/i.test(userAgent);
Date.prototype.Format = function(format) {
var o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"H+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"w": "0123456".indexOf(this.getDay()),
"S": this.getMilliseconds()
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
}
return format;
};
function DateAdd(interval, number, idate) {
number = parseInt(number);
var date;
if (typeof (idate) == "string") {
date = idate.split(/\D/);
eval("var date = new Date(" + date.join(",") + ")");
}
if (typeof (idate) == "object") {
date = new Date(idate.toString());
}
switch (interval) {
case "y": date.setFullYear(date.getFullYear() + number); break;
case "m": date.setMonth(date.getMonth() + number); break;
case "d": date.setDate(date.getDate() + number); break;
case "w": date.setDate(date.getDate() + 7 * number); break;
case "h": date.setHours(date.getHours() + number); break;
case "n": date.setMinutes(date.getMinutes() + number); break;
case "s": date.setSeconds(date.getSeconds() + number); break;
case "l": date.setMilliseconds(date.getMilliseconds() + number); break;
}
return date;
};
$.fn.datepicker = function(o) {
var def = {
weekStart: 0,
weekName: ["日", "一", "二", "三", "四", "五", "六"], //星期的格式
monthName: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"], //月份的格式
monthp: "月",
Year: new Date().getFullYear(), //定义年的变量的初始值
Month: new Date().getMonth() + 1, //定义月的变量的初始值
Day: new Date().getDate(), //定义日的变量的初始值
today: new Date(),
btnOk: " 确定 ",
btnCancel: " 取消 ",
btnToday: "今天",
inputDate: null,
onReturn: false,
version: "1.1",
applyrule: false, //function(){};return rule={startdate,endate};
showtarget: null,
picker: ""
};
$.extend(def, o);
var cp = $("#BBIT_DP_CONTAINER");
if (cp.length == 0) {
var cpHA = [];
cpHA.push("<div id='BBIT_DP_CONTAINER' class='bbit-dp' style='width:175px;z-index:999;'>");
if ($.browser.msie6) {
cpHA.push('<iframe style="position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank"></iframe>');
}
cpHA.push("<table class='dp-maintable' cellspacing='0' cellpadding='0' style='width:175px;'><tbody><tr><td>");
//头哟
cpHA.push("<table class='bbit-dp-top' cellspacing='0'><tr><td class='bbit-dp-top-left'> <a id='BBIT_DP_LEFTBTN' href='javascript:void(0);' title='向前一个月'> </a></td><td class='bbit-dp-top-center' align='center'><em><button id='BBIT_DP_YMBTN'>九月 2009</button></em></td><td class='bbit-dp-top-right'><a id='BBIT_DP_RIGHTBTN' href='javascript:void(0);' title='向后一个月'> </a></td></tr></table>");
cpHA.push("</td></tr>");
cpHA.push("<tr><td>");
//周
cpHA.push("<table id='BBIT_DP_INNER' class='bbit-dp-inner' cellspacing='0'><thead><tr>");
//生成周
for (var i = def.weekStart, j = 0; j < 7; j++) {
cpHA.push("<th><span>", def.weekName[i], "</span></th>");
if (i == 6) { i = 0; } else { i++; }
}
cpHA.push("</tr></thead>");
//生成tBody,需要重新生成的
cpHA.push("<tbody></tbody></table>");
//生成tBody结束
cpHA.push("</td></tr>");
cpHA.push("<tr><td class='bbit-dp-bottom' align='center'><button id='BBIT-DP-TODAY'>", def.btnToday, "</button></td></tr>");
cpHA.push("</tbody></table>");
//输出下来框
cpHA.push("<div id='BBIT-DP-MP' class='bbit-dp-mp' style='z-index:auto;'><table id='BBIT-DP-T' style='width: 175px; height: 193px' border='0' cellspacing='0'><tbody>");
cpHA.push("<tr>");
//1月,7月 按钮两个
cpHA.push("<td class='bbit-dp-mp-month' xmonth='0'><a href='javascript:void(0);'>", def.monthName[0], "</a></td><td class='bbit-dp-mp-month bbit-dp-mp-sep' xmonth='6'><a href='javascript:void(0);'>", def.monthName[6], "</a></td><td class='bbit-dp-mp-ybtn' align='middle'><a id='BBIT-DP-MP-PREV' class='bbit-dp-mp-prev'></a></td><td class='bbit-dp-mp-ybtn' align='middle'><a id='BBIT-DP-MP-NEXT' class='bbit-dp-mp-next'></a></td>");
cpHA.push("</tr>");
cpHA.push("<tr>");
cpHA.push("<td class='bbit-dp-mp-month' xmonth='1'><a href='javascript:void(0);'>", def.monthName[1], "</a></td><td class='bbit-dp-mp-month bbit-dp-mp-sep' xmonth='7'><a href='javascript:void(0);'>", def.monthName[7], "</a></td><td class='bbit-dp-mp-year'><a href='javascript:void(0);'></a></td><td class='bbit-dp-mp-year'><a href='javascript:void(0);'></a></td>");
cpHA.push("</tr>");
cpHA.push("<tr>");
cpHA.push("<td class='bbit-dp-mp-month' xmonth='2'><a href='javascript:void(0);'>", def.monthName[2], "</a></td><td class='bbit-dp-mp-month bbit-dp-mp-sep' xmonth='8'><a href='javascript:void(0);'>", def.monthName[8], "</a></td><td class='bbit-dp-mp-year'><a href='javascript:void(0);'></a></td><td class='bbit-dp-mp-year'><a href='javascript:void(0);'></a></td>");
cpHA.push("</tr>");
cpHA.push("<tr>");
cpHA.push("<td class='bbit-dp-mp-month' xmonth='3'><a href='javascript:void(0);'>", def.monthName[3], "</a></td><td class='bbit-dp-mp-month bbit-dp-mp-sep' xmonth='9'><a href='javascript:void(0);'>", def.monthName[9], "</a></td><td class='bbit-dp-mp-year'><a href='javascript:void(0);'></a></td><td class='bbit-dp-mp-year'><a href='javascript:void(0);'></a></td>");
cpHA.push("</tr>");
cpHA.push("<tr>");
cpHA.push("<td class='bbit-dp-mp-month' xmonth='4'><a href='javascript:void(0);'>", def.monthName[4], "</a></td><td class='bbit-dp-mp-month bbit-dp-mp-sep' xmonth='10'><a href='javascript:void(0);'>", def.monthName[10], "</a></td><td class='bbit-dp-mp-year'><a href='javascript:void(0);'></a></td><td class='bbit-dp-mp-year'><a href='javascript:void(0);'></a></td>");
cpHA.push("</tr>");
cpHA.push("<tr>");
cpHA.push("<td class='bbit-dp-mp-month' xmonth='5'><a href='javascript:void(0);'>", def.monthName[5], "</a></td><td class='bbit-dp-mp-month bbit-dp-mp-sep' xmonth='11'><a href='javascript:void(0);'>", def.monthName[11], "</a></td><td class='bbit-dp-mp-year'><a href='javascript:void(0);'></a></td><td class='bbit-dp-mp-year'><a href='javascript:void(0);'></a></td>");
cpHA.push("</tr>");
cpHA.push("<tr class='bbit-dp-mp-btns'>");
cpHA.push("<td colspan='4'><button id='BBIT-DP-MP-OKBTN' class='bbit-dp-mp-ok'>", def.btnOk, "</button><button id='BBIT-DP-MP-CANCELBTN' class='bbit-dp-mp-cancel'>", def.btnCancel, "</button></td>");
cpHA.push("</tr>");
cpHA.push("</tbody></table>");
cpHA.push("</div>");
cpHA.push("</div>");
var s = cpHA.join("");
$(document.body).append(s);
var cp = $("#BBIT_DP_CONTAINER");
initevents();
}
function initevents() {
//1 today btn;
$("#BBIT-DP-TODAY").click(returntoday);
cp.click(returnfalse);
$("#BBIT_DP_INNER tbody").click(tbhandler);
$("#BBIT_DP_LEFTBTN").click(prevm);
$("#BBIT_DP_RIGHTBTN").click(nextm);
$("#BBIT_DP_YMBTN").click(showym);
$("#BBIT-DP-MP").click(mpclick);
$("#BBIT-DP-MP-PREV").click(mpprevy);
$("#BBIT-DP-MP-NEXT").click(mpnexty);
$("#BBIT-DP-MP-OKBTN").click(mpok);
$("#BBIT-DP-MP-CANCELBTN").click(mpcancel);
}
function mpcancel() {
$("#BBIT-DP-MP").animate({ top: -193 }, { duration: 200, complete: function() { $("#BBIT-DP-MP").hide(); } });
return false;
}
function mpok() {
def.Year = def.cy;
def.Month = def.cm + 1;
def.Day = 1;
$("#BBIT-DP-MP").animate({ top: -193 }, { duration: 200, complete: function() { $("#BBIT-DP-MP").hide(); } });
writecb();
return false;
}
function mpprevy() {
var y = def.ty - 10
def.ty = y;
rryear(y);
return false;
}
function mpnexty() {
var y = def.ty + 10
def.ty = y;
rryear(y);
return false;
}
function rryear(y) {
var s = y - 4;
var ar = [];
for (var i = 0; i < 5; i++) {
ar.push(s + i);
ar.push(s + i + 5);
}
$("#BBIT-DP-MP td.bbit-dp-mp-year").each(function(i) {
if (def.Year == ar[i]) {
$(this).addClass("bbit-dp-mp-sel");
}
else {
$(this).removeClass("bbit-dp-mp-sel");
}
$(this).html("<a href='javascript:void(0);'>" + ar[i] + "</a>").attr("xyear", ar[i]);
});
}
function mpclick(e) {
var panel = $(this);
var et = e.target || e.srcElement;
var td = getTd(et);
if (td == null) {
return false;
}
if ($(td).hasClass("bbit-dp-mp-month")) {
if (!$(td).hasClass("bbit-dp-mp-sel")) {
var ctd = panel.find("td.bbit-dp-mp-month.bbit-dp-mp-sel");
if (ctd.length > 0) {
ctd.removeClass("bbit-dp-mp-sel");
}
$(td).addClass("bbit-dp-mp-sel")
def.cm = parseInt($(td).attr("xmonth"));
}
}
if ($(td).hasClass("bbit-dp-mp-year")) {
if (!$(td).hasClass("bbit-dp-mp-sel")) {
var ctd = panel.find("td.bbit-dp-mp-year.bbit-dp-mp-sel");
if (ctd.length > 0) {
ctd.removeClass("bbit-dp-mp-sel");
}
$(td).addClass("bbit-dp-mp-sel")
def.cy = parseInt($(td).attr("xyear"));
}
}
return false;
}
function showym() {
var mp = $("#BBIT-DP-MP");
var y = def.Year;
def.cy = def.ty = y;
var m = def.Month - 1;
def.cm = m;
var ms = $("#BBIT-DP-MP td.bbit-dp-mp-month");
for (var i = ms.length - 1; i >= 0; i--) {
var ch = $(ms[i]).attr("xmonth");
if (ch == m) {
$(ms[i]).addClass("bbit-dp-mp-sel");
}
else {
$(ms[i]).removeClass("bbit-dp-mp-sel");
}
}
rryear(y);
mp.css("top", -193).show().animate({ top: 0 }, { duration: 200 });
}
function getTd(elm) {
if (elm.tagName.toUpperCase() == "TD") {
return elm;
}
else if (elm.tagName.toUpperCase() == "BODY") {
return null;
}
else {
var p = $(elm).parent();
if (p.length > 0) {
if (p[0].tagName.toUpperCase() != "TD") {
return getTd(p[0]);
}
else {
return p[0];
}
}
}
return null;
}
function tbhandler(e) {
var et = e.target || e.srcElement;
var td = getTd(et);
if (td == null) {
return false;
}
var $td = $(td);
if (!$(td).hasClass("bbit-dp-disabled")) {
var s = $td.attr("xdate");
var arrs = s.split("-");
cp.data("indata", new Date(arrs[0], parseInt(arrs[1], 10) - 1, arrs[2]));
returndate();
}
return false;
}
function returnfalse() {
return false;
}
function prevm() {
if (def.Month == 1) {
def.Year--;
def.Month = 12;
}
else {
def.Month--
}
writecb();
return false;
}
function nextm() {
if (def.Month == 12) {
def.Year++;
def.Month = 1;
}
else {
def.Month++
}
writecb();
return false;
}
function returntoday() {
cp.data("indata", new Date());
returndate();
}
function returndate() {
var ct = cp.data("ctarget");
var ck = cp.data("cpk");
var re = cp.data("onReturn");
var ndate = cp.data("indata")
var ads = cp.data("ads");
var ade = cp.data("ade");
var dis = false;
if (ads && ndate < ads) {
dis = true;
}
if (ade && ndate > ade) {
dis = true;
}
if (dis) {
return;
}
if (re && jQuery.isFunction(re)) {
re.call(ct[0], cp.data("indata"));
}
else {
ct.val(cp.data("indata").Format("yyyy-MM-dd"));
}
ck.attr("isshow", "0");
cp.removeData("ctarget").removeData("cpk").removeData("indata").removeData("onReturn")
.removeData("ads").removeData("ade");
cp.css("visibility", "hidden");
ct = ck = null;
}
function writecb() {
var tb = $("#BBIT_DP_INNER tbody");
$("#BBIT_DP_YMBTN").html(def.monthName[def.Month - 1] + def.monthp + " " + def.Year);
var firstdate = new Date(def.Year, def.Month - 1, 1);
var diffday = def.weekStart - firstdate.getDay();
var showmonth = def.Month - 1;
if (diffday > 0) {
diffday -= 7;
}
var startdate = DateAdd("d", diffday, firstdate);
var enddate = DateAdd("d", 42, startdate);
var ads = cp.data("ads");
var ade = cp.data("ade");
var bhm = [];
var tds = def.today.Format("yyyy-MM-dd");
var indata = cp.data("indata");
var ins = indata != null ? indata.Format("yyyy-MM-dd") : "";
for (var i = 1; i <= 42; i++) {
if (i % 7 == 1) {
bhm.push("<tr>");
}
var ndate = DateAdd("d", i - 1, startdate);
var tdc = [];
var dis = false;
if (ads && ndate < ads) {
dis = true;
}
if (ade && ndate > ade) {
dis = true;
}
if (ndate.getMonth() < showmonth) {
tdc.push("bbit-dp-prevday");
}
else if (ndate.getMonth() > showmonth) {
tdc.push("bbit-dp-nextday");
}
if (dis) {
tdc.push("bbit-dp-disabled");
}
else {
tdc.push("bbit-dp-active");
}
var s = ndate.Format("yyyy-MM-dd");
if (s == tds) {
tdc.push("bbit-dp-today");
}
if (s == ins) {
tdc.push("bbit-dp-selected");
}
bhm.push("<td class='", tdc.join(" "), "' title='", ndate.Format("yyyy-MM-dd"), "' xdate='", ndate.Format("yyyy-M-d"), "'><a href='javascript:void(0);'><em><span>", ndate.getDate(), "</span></em></a></td>");
if (i % 7 == 0) {
bhm.push("</tr>");
}
}
tb.html(bhm.join(""));
}
var dateReg = /^(\d{1,4})(-|\/|.)(\d{1,2})\2(\d{1,2})$/;
return $(this).each(function() {
var obj = $(this).addClass("bbit-dp-input");
var picker = $(def.picker);
def.showtarget == null && obj.after(picker);
picker.click(function(e) {
var isshow = $(this).attr("isshow");
//先隐藏
var me = $(this);
if (cp.css("visibility") == "visible") {
cp.css(" visibility", "hidden");
}
if (isshow == "1") {
me.attr("isshow", "0");
cp.removeData("ctarget").removeData("cpk").removeData("indata").removeData("onReturn");
return false;
}
var v = obj.val();
if (v != "") {
v = v.match(dateReg);
}
if (v == null || v == "") {
def.Year = new Date().getFullYear();
def.Month = new Date().getMonth() + 1;
def.Day = new Date().getDate();
def.inputDate = null
}
else {
def.Year = parseInt(v[1], 10);
def.Month = parseInt(v[3], 10);
def.Day = parseInt(v[4], 10);
def.inputDate = new Date(def.Year, def.Month - 1, def.Day);
}
cp.data("ctarget", obj).data("cpk", me).data("indata", def.inputDate).data("onReturn", def.onReturn);
if (def.applyrule && $.isFunction(def.applyrule)) {
var rule = def.applyrule.call(obj, obj[0].id);
if (rule) {
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,//无用,只是在代码中会用它存放数据
onReturn: false,//当选择日期后回调的函数
version: "1.0",//版本
applyrule: false, //日期选择规则,可设置可选择的日期范围function(){};return rule={startdate,endate};
showtarget: null, //显示载体,日历展开式所依赖的对象,默认是对象本身
picker: "" //附加点击事件的对象
};
$.extend(def, o);//用传递过来的参数来填充默认

第二部自然是初始化月视图和年月选择视图的HTML了


复制代码 代码如下:

//给日期选择控件一个特殊的ID,获取这个ID的对象,判断如果对象存在,则直接使用
// 日期的HTML采用单例,即一个页面上只生成一份HTML
var cp = $("#BBIT_DP_CONTAINER");
if (cp.length == 0) {
var cpHA = []; //老规矩还是用数组拼接html,最后用innerHTML的方式附加到容器,提升性能
cpHA.push("<div id='BBIT_DP_CONTAINER' class='bbit-dp' style='width:175px;z-index:999;'>");
if ($.browser.msie6) { //如果是IE6弹出层遮盖select
cpHA.push('<iframe style="position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank"></iframe>');
}
cpHA.push("<table class='dp-maintable' cellspacing='0' cellpadding='0' style='width:175px;'><tbody><tr><td>");
//头哟
cpHA.push("<table class='bbit-dp-top' cellspacing='0'><tr><td class='bbit-dp-top-left'> <a id='BBIT_DP_LEFTBTN' href='javascript:void(0);' title='向前一个月'> </a></td><td class='bbit-dp-top-center' align='center'><em><button id='BBIT_DP_YMBTN'>九月 2009</button></em></td><td class='bbit-dp-top-right'><a id='BBIT_DP_RIGHTBTN' href='javascript:void(0);' title='向后一个月'> </a></td></tr></table>");
cpHA.push("</td></tr>");
cpHA.push("<tr><td>");
//周
cpHA.push("<table id='BBIT_DP_INNER' class='bbit-dp-inner' cellspacing='0'><thead><tr>");
//生成周
for (var i = def.weekStart, j = 0; j < 7; j++) {
cpHA.push("<th><span>", def.weekName[i], "</span></th>");
if (i == 6) { i = 0; } else { i++; }
}
.....//省略若干代码
cpHA.push("</tbody></table>");
cpHA.push("</div>");
cpHA.push("</div>");
var s = cpHA.join("");
$(document.body).append(s); //添加到body中
cp = $("#BBIT_DP_CONTAINER"); //再获取一遍
initevents(); //初始化事件
}

这里有一个关键点,就是日期的html输出和事件初始化只做一次,因为基本上一页上同时不会打开两个。还有就是生成html中有一些特殊的自定义属性哦,仔细看下就会发现的,这些属性在后面的时间处理中都有很大的作用。那么来看一下事件吧


复制代码 代码如下:

$("#BBIT-DP-TODAY").click(returntoday);//今天按钮的事件
cp.click(returnfalse);//阻止冒泡
$("#BBIT_DP_INNER tbody").click(tbhandler);//给月视图中间body添加click事件而不是给每个td添加
$("#BBIT_DP_LEFTBTN").click(prevm);//上个月
$("#BBIT_DP_RIGHTBTN").click(nextm);//下个月
$("#BBIT_DP_YMBTN").click(showym);//切换到年月视图
$("#BBIT-DP-MP").click(mpclick);//年月视图的点击事件,同样用于分发
$("#BBIT-DP-MP-PREV").click(mpprevy);//上一年
$("#BBIT-DP-MP-NEXT").click(mpnexty);//下一年
$("#BBIT-DP-MP-OKBTN").click(mpok);//ok按钮的事件
$("#BBIT-DP-MP-CANCELBTN").click(mpcancel);//cancel按钮的事件

给每一个需要点击的元素加上事件哦,这里有两个地方比较特殊,一个事月视图的点击视图,传统的做法就是给每个td都加事件,但是这个时候我的td还没有呢,但是如果在每次生成td的时候来附加事件,那么就由影响性能,所以直接给容器加了click事件,通过对事件源的判断来分发事件,另外一个年月选择视图,也是和上面一样的逻辑,那么我们
就拿月视图的点击事件来分析一下,其实每一个td生成的时候都会注册一个xdate自定义属性 ,来看一下tbhandler函数


复制代码 代码如下:

function tbhandler(e) {
var et = e.target || e.srcElement; //找到事件源
var td = getTd(et); //事件源递归往上找td
if (td == null) {
return false;
}
var $td = $(td);
.
if (!$(td).hasClass("bbit-dp-disabled")) {如果不是禁用状态
var s = $td.attr("xdate");//获取td的自定义属性日期数据
var arrs = s.split("-");
cp.data("indata", new Date(arrs[0], parseInt(arrs[1], 10) - 1, arrs[2]));
returndate();//返回日期
.
}
return false;
}

所有的日期选择时间初始化好了(一次性的),接着就要给每一个的picker添加点击事件了


复制代码 代码如下:

return $(this).each(function() {
var obj = $(this).addClass("bbit-dp-input");//给input添加样式
var picker = $(def.picker);//获取picker对象
//如果showtarget不为null这将picker注册到input的后面
//否则用户自己处理picker的位置,即picker在页面上本身就已经存在
//大家可以看看示例中1,3调用的区别
def.showtarget == null && obj.after(picker);
picker.click(function(e) {
....//省略代码
});

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


复制代码 代码如下:

function(e) {
//获取当前是否显示
var isshow = $(this).attr("isshow");
var me = $(this);
//如果显示着,则隐藏,用于处理点击一下picker显示,再点击picker隐藏的逻辑
if (cp.css("visibility") == "visible") {
cp.css(" visibility", "hidden");
}
//同样是如果显示着
if (isshow == "1") {
me.attr("isshow", "0");
//remover临时数据,因为是单例所以要表示当前是哪个input
cp.removeData("ctarget").removeData("cpk").removeData("indata").removeData("onReturn");
return false; //阻止冒泡
}
//如果隐藏着,获取input的值
var v = obj.val();
if (v != "") {
v = v.match(dateReg);//验证一下格式是否正确
}
if (v == null || v == "") {//格式不正确或为空则用当前日期
def.Year = new Date().getFullYear();
def.Month = new Date().getMonth() + 1;
def.Day = new Date().getDate();
def.inputDate = null
}
else {
//否则使用input的日期
def.Year = parseInt(v[1], 10);
def.Month = parseInt(v[3], 10);
def.Day = parseInt(v[4], 10);
def.inputDate = new Date(def.Year, def.Month - 1, def.Day);
}
//注册临时数据
cp.data("ctarget", obj).data("cpk", me).data("indata", def.inputDate).data("onReturn", def.onReturn);
//调用规则,返回可选的日期范围
if (def.applyrule && $.isFunction(def.applyrule)) {
var rule = def.applyrule.call(obj, obj[0].id);
if (rule) {
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")
}
//画月日历内容td了
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注册单次的click事件,解决打开日期选择器后,点击其他位置,隐藏日期选择器的问题
$(document).one("click", function(e) {
me.attr("isshow", "0");
cp.removeData("ctarget").removeData("cpk").removeData("indata");
cp.css("visibility", "hidden");
});
return false;//组织冒泡
}

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

第一个示例是老老实实的演示Demo示例,有三种方式,也有调用方式的说明:http://jscs.cloudapp.net/ControlsSample/dpdemo
第二个示例是我写的日程管理控件中结合datepicker的应用(大家可以先看看这个)http://xuanye.cloudapp.net/

位置是:

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

时间: 2009-10-24

jQuery日程管理插件fullcalendar使用详解

FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用性. HTML 首先是要载入jQuery库和fullcalendar插件. <script src='js/jquery-1.9.1.min.js'></script> <script src='js/fullcalendar.min.js'></script>

jquery UI Datepicker时间控件的使用及问题解决

本文实例为大家分享了jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题. 1.jqueryUI的datepicker的使用 -->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题:下载地址: -->下载后的文件 jquery-ui-1.10.3.custom文件夹:不同的主题的区别在于它们引用的css不同 默认下载的样式如下: 其它样式比如我下载的样式: 下载的jqueryUI中除了css文件夹

jquery UI Datepicker时间控件的使用方法(基础版)

本文为大家分享jquery ui datepicker时间控件的使用方法,通过实例讲解了解ui datepicker时间控件,先给大家看一看效果图: 效果: 常用场合: 1.输入框 2.div 使用方法: 1.限制日期 $("#resultDiv").datepicker({ onSelect: function (dateText, inst) { //代码:选择日期后触发的事件 }, minDate: new Date(),//最小日期 maxDate: new Date($(&q

jquery UI Datepicker时间控件的使用方法(加强版)

先来看看Datepicker插件的属性表: 第一个日历插件的使用实例 首先导入需要的类库文件: <</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script> <</SPAN>scripttype="text/javas

jQuery日程管理控件glDatePicker用法详解

本文实例讲述了jQuery日程管理控件glDatePicker用法.分享给大家供大家参考,具体如下: 之前接触过一款日程管理控件,叫 FullCalendar,功能很强大,会列出每天的事项,可选择编辑并且可以定制自己的日历,然而,有时候,我们的网页上只需要一个简单的日历,迷你但实用,有日程安排的日期高亮显示,可跳转日期,可选择日期等等基本功能都应该具备,而这时 FullCalendar 就显得太过庞大了,所以,就有了我对 glDatePicker 控件的学习. 先看效果:    橘红色表示当前选

datePicker——日期选择控件(with jquery)

demo: http://demo.jb51.net/js/2011/jQuery_calendar/index.html down: http://www.jb51.net/jiaoben/19622.html 用法很简单,而且js文件也很小,之前也见过一些日期选择控件,但个头都比较大,影响速度可以设置日期的格式,可以选择日期的起止时间,如果不加参数的话,默认就是之前的日期不可选,而只能从今天开始选择 现在My97 DatePicker也不错,不用jquery 一款很不错的基于JavaScri

jquery UI Datepicker时间控件的使用方法(终结版)

近期项目中用到日期控件,感觉不错,写出来分享给大家看看,我限制的开始时间和结束时间跨度不超过三天,并配置有清空时间,重选时间等功能,分享给大家: 先给大家看两张效果图 在例子中我控制的开始时间和结束时间为三天,也就是开始时间和结束时间的跨度不能超过三天. 具体是怎么实现的,代码中会附有很详细的解释,请大家继续往下看: 第一步,引入控件js,这里有两个,一个是jquery.js,一个是jquery-ui-datepicker.js,当然还有引入样式文件: <script type="text

jquery 日期控件datepicker属性详细解析

复制代码 代码如下: $("#regDate").datepicker(     {    showMonthAfterYear: true, // 月在年之后显示    changeMonth: true,   // 允许选择月份    changeYear: true,   // 允许选择年份    dateFormat:'yy-mm-dd',  // 设置日期格式    closeText:'关闭',   // 只有showButtonPanel: true才会显示出来    d

JQuery EasyUI 日期控件如何控制日期选择区间

复制代码 代码如下: <tr><th>发售起始日期</th> <td><input type="text" id="usLineTime" name="usLineTime" size="20" class='easyui-validatebox Wdate' onFocus="WdatePicker({el:'usLineTime',dateFmt:'yyyy-

jquery UI Datepicker时间控件冲突问题解决

公司里的项目由于发展较快,很多东西都没有好好梳理一下,以至于有很多的潜在的问题. 最近就遇到了一个比较坑的问题.datepicker  有两个插件库中的datepicker插件比较有名.一个是jQuery-UI,一个是bootstrap.两个的api网址分别是 然而在项目中很不巧的两个库都用到了.然后就出现了以下情况:http://jqueryui.com/datepicker/   和  http://bootstrap-datepicker.readthedocs.io/en/latest/

详解Vue.js和layui日期控件冲突问题解决办法

事故还原: 今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现是vue的model绑定和layui冲突产生的,事实上是vue无法动态绑定layui中获取到的日期值,我们把那个v-model去掉就好,但是去掉的话就没办法动态绑定后台数据. 下面是html+vuejs+layui lyui通过use方法获取到input的ID实现日期选择,但是vue的model绑定和layui是有冲突的. 对于

Android开发中DatePicker日期与时间控件实例代码

一.简介 二.方法 最日常的使用方法了 日期控件DatePicker 时间控件TimePicker 月份从0开始 三.代码实例 效果图: 代码: fry.Activity01 package fry; import com.example.DatePicherDemo1.R; import android.app.Activity; import android.os.Bundle; import android.widget.DatePicker; import android.widget.

Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】

最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件,其中时间要设置为必选, 产品要叫日历控件做成只能做3天之内的查询,且日历控件要做成这样的要求,如果前一个日历控制选择了2013年9月1号 后面的日历控件只能选择2013年9月1号,2013年9月2号,2013年9月3号,其他的全部要不能选,本来想叫他给提示的,领导非要这么干 真是领导一句话,码工辛苦好几

bootstrap时间控件daterangepicker使用方法及各种小bug修复

双日历时间段选择插件 - daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间,时间段的最大跨度可以在程序里设定. 一.引用 daterangepicker依托monent.js 和jquery使用.所以在使用中在引入daterangepicker之前必须引入monent.js和jquery以及bootstrap. <script type="text/javascript" src

jQuery UI Datepicker length为空或不是对象错误的解决方法

我们开发ASP.NET站点时,如果将jQuery UI Datepicker与ASP.NET的验证控件(如:RequiredFieldValidator)组合使用: 复制代码 代码如下: <asp:TextBox ID="txtDate" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="reqDate" runat="server&