 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Untitled Page</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<style type="text/css"> 
*{margin:0;padding:0;} 
/*日期控件*/ 
.pc_caldr { background-color: #FFFFFF; border: 1px solid #CCCCCC; color: #000000; height: auto; padding: 5px; position: absolute; width: 161px; z-index: 10; } 
.pc_caldr .selector { height: 24px; padding: 2px 0 0; } 
.pc_caldr .selector .month, .pc_caldr .selector .year { border: 1px solid #CCCCCC; float: left; font-size: 12px; height: 19px; width: 73px; } 
.pc_caldr .selector .year { margin-left: 10px; width: 78px; } 
.pc_caldr .weeks, .pc_caldr .days { list-style: none outside none; margin: 0; padding: 0; width: 100% !important; } 
.pc_caldr .weeks { background: none repeat scroll 0 0 #B6D1F9; color: #FFFFFF; font-size: 12px; height: 18px; margin-bottom: 2px; } 
.pc_caldr .days { font-family: Arial; font-size: 12px; height: auto; } 
.pc_caldr .weeks li, .pc_caldr .days li { float: left; height: 18px; line-height: 18px; text-align: center; width: 23px; } 
.pc_caldr .weeks li { text-align: center; } 
.pc_caldr table { width: 100%; } 
.pc_caldr table td{text-align:center;} 
.pc_caldr table td.before { color: #43609C; cursor: pointer; } 
.pc_caldr table td.day { background-color: #5D94E6; color: #FFFFFF; } 
/*文本框*/ 
.tiemin{width:120px;border:1px solid #f00;} 
.inline-block {display :inline-block; zoom:1 ; *display: inline; vertical-align:middle ;} 
</style> 
</head> 
<body> 
<div style="height: 200px;"> 
</div> 
<input type="text" class="tiemin" readonly="readonly" /> 
<div style="height: 200px;"> 
</div> 
<span style="width: 200px;" class="inline-block"></span> 
<input type="text" class="tiemin" readonly="readonly" /> 
<script type="text/javascript"> 
//全部包裹 
var sookerTime = (function ($) { 
var OBJ; 
function isLeap(year) { return (year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1 : 0)); } 
function isValid(d) { return (d.getTime() - (new Date()).getTime() < 0) ? true : false; } //是否在今天以后 
function setDate(year, month) { //建立日期table 
var n1 = new Date(year, month, 1), 
firstday = n1.getDay(), 
mdays = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), 
rows = Math.ceil((mdays[month] + firstday) / 7), 
table = $("<table>", { "class": "days" }), 
tbody = $("<tbody>"); 
$("#calendar").find(".days").remove(); 
for (var i = 0; i < rows; i++) { 
var tr = $("<tr>"); 
for (j = 0; j < 7; j++) { 
var idx = i * 7 + j, 
d = idx - firstday + 1; 
if (d <= 0 || d > mdays[month]) { //無效日期 
d = "&nbsp;" 
} 
var td = $("<td>", { html: d }).appendTo(tr); 
if (isValid(new Date(year, month, d))) { //今天以后的時間都不綁定時間 
td.addClass("before"); 
td.hover(function () { 
$(this).addClass("day"); 
}, function () { $(this).removeClass("day"); }).click(function () { 
OBJ.attr("value", $("#calendar .year").attr("value") + "-" + (parseInt($("#calendar .month").attr("value")) + 1) + "-" + $(this).text()); 
$("#calendar").css("display", "none"); 
}); 
} 
} 
tr.appendTo(tbody); 
} 
tbody.appendTo(table); 
$("#calendar").append(table); 
} 
function createTime() { 
var calendar = $("<div>", { "class": "pc_caldr", id: "calendar" }), 
td = new Date(), 
of = OBJ.offset(); 
if (document.getElementById("calendar")) { 
calendar = $("#calendar").css({ left: of.left, top: of.top + 18, display: "block" }); 
setDate(td.getFullYear(), td.getMonth()); 
$("#calendar .year").attr("value", td.getFullYear()); 
$("#calendar .month").attr("value", td.getMonth()); 
} else { 
var se = "<div class='selector'><select class='month'><option value='0'>一月</option><option value='1'>二月</option><option value='2'>三月</option><option value='3'>四月</option><option value='4'>五月</option><option value='5'>六月</option><option value='6'>七月</option><option value='7'>八月</option><option value='8'>九月</option><option value='9'>十月</option><option value='10'>十一月</option><option value='11'>十二月</option></select><select class='year'><option value='2009'>2009</option><option value='2010'>2010</option><option value='2011'>2011</option></select></div><ul class='weeks'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>"; 
calendar.css({ left: of.left, top: of.top + 18 }).html(se).appendTo($("body")); 
setDate(td.getFullYear(), td.getMonth()); 
$("#calendar .year").attr("value", td.getFullYear()); 
$("#calendar .month").attr("value", td.getMonth()); 
bindClick(); 
} 
} 
function bindClick() { //給下拉列表綁定時間 
var a = $("#calendar .month"), 
b = $("#calendar .year"); 
a.change(function () { 
setDate(b.attr("value"), $(this).attr("value")); 
}); 
b.change(function () { 
setDate($(this).attr("value"), a.attr("value")); 
}); 
} 
return { 
init: function (obj) { //返回調用的接口 
OBJ = obj; 
createTime(); 
} 
} 
})(jQuery); 
//使用方法 
$(".tiemin").focus(function(){ 
sookerTime.init($(this)); 
}); 
</script> 
</body> 
</html> 