基于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=>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=>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], "</

上一个：javascript 实现划词标记划词搜索功能
下一个：解决jquery .ajax 在IE下卡死问题的解决方法