HTML样式：
/*日历*/
#rili{
width:523px;height:255px;
padding-bottom:50px;
border:1px solid #d4d4d4;border-top:2px solid #cc3529; background:#f5f5f5;
background:url(../Content/Images/time_h.jpg) no-repeat 20px 70px ;
}
.gybtit{height:55px;}
.rilitab{border:0;width:523px;}
.currmud{width:40px;height:30px;cursor:pointer;padding-top:6px;font-size:12px; }
.daysel{background:url(../Content/Images/red_radius.png) no-repeat center center;color:white;}
.currmud:hover {background: url(../Content/Images/h_radius.png) no-repeat center center; }
.lastMonth{float:left; cursor:pointer; float:left;padding:8px 5px 0 0; }
.nextMonth{float:right;padding:8px 0 0 5px; cursor:pointer;float:left;}
.rilixfont{ font-size:12px; width:40px; height:30px; Color:#969696;}
.rilixth{width:392px;}
.rilixth th{width:40px;height:30px; border:0px;}
.jintian { background:url(../Content/Images/red_radius.png) no-repeat center center; color:white;}
.jintian:hover {background: url(../Content/Images/h_radius.png) no-repeat center center;}
.jintian_1 { width:57px; height:26px; background:url(../Content/Images/time_jt5.png) no-repeat; color:#666; float:left; text-align:center; font-size:12px;font-family:"宋体"; }
.nianyuer { font-size:14px; padding:3px 0 0 0;color:#969696; float:left; font-family:"宋体"; font-weight:normal; }
.nian_em {font-size:14px;color:#969696;font-family:"宋体"; font-weight:normal; Font-style:normal;}
.yue { font-size:14px;color:#cc2a1e; font-family:"宋体";font-weight:normal;Font-style:normal; }
.diwen { float:left; background:#f0f0f0; margin-right:53px; height:26px;}
.anrqichaxun {float:left; font-size:18px;margin:0 53px 0 24px;font-weight:normal;Font-style:normal; }
.bj_rq { float:left; margin:20px 0 0 20px; padding-right:20px;}
.rl_tb {width:370px; margin:10px 0 0 125px; }
.time_jt_l { float:left; margin-right:33px; }
.time_jt_r{ float:left; margin-left:33px; }
HTML页面调用：
<script type="text/javascript">
$(function () {
var vdate = new Date();
calendar(vdate, ".jzhrili");
});
</script>
function clickFun(clickC, selC, noC, biq, aType)
{
if (aType == 7)
{
var time = new Date();
var Year = time.getFullYear();
var Month = parseInt(time.getMonth()) + 1;
var getDay = time.getDate();
//判断同类，没有不选中样式
$(clickC).click(function ()
{
var _this = $(this);
$(clickC).each(function () {
$(this).removeClass(selC);
});
_this.addClass(selC);
});
}
}
日历控件核心脚本：
var iscurrmonth = 0;
var iscurryear = 0;
var jzhData2 = "#jzhData";
//创建一个数组,用于存放每个月的天数
function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)
{
this[0] = m0;
this[1] = m1;
this[2] = m2;
this[3] = m3;
this[4] = m4;
this[5] = m5;
this[6] = m6;
this[7] = m7;
this[8] = m8;
this[9] = m9;
this[10] = m10;
this[11] = m11; }
//实现月历
function calendar(vdate, jzhData1)
{
jzhData2 = jzhData1;
var jzhData = "出错了";
var today = vdate;
//今天日期;
var thisDay;
var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
//每月对应天数
year = today.getYear() + 1900;
var tdate = new Date();
thisDay = tdate.getDate();
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0))
monthDays[1] = 29;
nDays = monthDays[today.getMonth()];
firstDay = today;
firstDay.setDate(1);
testMe = firstDay.getDate();
if (testMe == 2)
firstDay.setDate(0);
startDay = firstDay.getDay();
jzhData = ("<div id=‘rili‘ >")
jzhData += ("<table>")
jzhData += ("<tr><td ><table class=‘rilitab‘ cellspacing=‘0‘ cellpadding=‘2‘ >");
jzhData += ("<tr><th colspan=‘7‘ bgcolor=‘#e6e6e6‘ class=‘gybtit‘ >");
jzhData += ("<div class=‘anrqichaxun‘>按日期查询</div><div class=‘diwen‘><div class=‘time_jt_l‘><a onclick=‘showMonth(-13)‘><img src=‘../Content/Images/time_jt.jpg‘/></a></div><div class=‘lastMonth‘ onclick=‘showMonth(-1)‘><a><img src=‘../Content/Images/time_jt3.png‘/></a></div>");
//上个月
var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var monthNames = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
var now = vdate;//new Date();
jzhData += ("<FONT class=‘nianyuer‘><em class=‘yue‘>" + monthNames[now.getMonth()] + "</em>月/<em class=‘nian_em‘>" + now.getFullYear() + "</em>年</FONT>\n");
jzhData += ("<div class=‘nextMonth‘ onclick=‘showMonth(1)‘><a><img src=‘../Content/Images/time_jt4.png‘/></a></div><div class=‘time_jt_r‘><a onclick=‘showMonth(13)‘><img src=‘../Content/Images/time_jt2.jpg‘/></a></div></div><div class=‘jintian_1‘><a href=‘javascript:;‘onclick=‘jintian()‘ style=‘text-decoration: none;‘>今天<a></div>");
//下个月
jzhData += ("</th></tr><table class=‘rl_tb‘><tr class=‘rilixth‘>\n");
jzhData += ("<th ><font class=‘rilixfont‘>周日</font></th>\n");
jzhData += ("<th ><font class=‘rilixfont‘>周一</font></th>\n");
jzhData += ("<th ><font class=‘rilixfont‘>周二</font></th>\n");
jzhData += ("<th ><font class=‘rilixfont‘>周三</font></th>\n");
jzhData += ("<th ><font class=‘rilixfont‘>周四</font></th>\n");
jzhData += ("<th ><font class=‘rilixfont‘>周五</font></th>\n");
jzhData += ("<th ><font class=‘rilixfont‘>周六</font></th>\n");
jzhData += ("</tr><tr>");
column = 0;
for (i = 0; i < startDay; i++) {
jzhData += ("</td><td ALIGN=‘CENTER‘><font style=‘font-size:9px;font-family:Arial;color:#f5f5f5‘>\n");
//在这里给上月日期加事件和样式！
jzhData += (i + "\n");
jzhData += ("</font></td>\n")
column++;
}
for (i = 1; i <= nDays; i++) {
if (i == thisDay && vdate.getFullYear() == tdate.getFullYear() && vdate.getMonth() == tdate.getMonth())
{
//在这里给默认选中当前日期加事件和样式
jzhData += ("</td><td class=‘jintian‘ ALIGN=‘CENTER‘><font>\n")
}
else {
jzhData += ("</td><td ALIGN=‘CENTER‘ ><font >\n");
}
//在这里给下月日期加事件和样式！
jzhData += ("<div class=‘currmud ‘>" + i + "</div>\n");
if (i == thisDay && vdate.getFullYear() == tdate.getFullYear() && vdate.getMonth() == tdate.getMonth())
{
jzhData += ("</font></td>\n");
}
column++;
if (column == 7)
{
jzhData += ("<tr>\n");
column = 0;
}
}
if (column < 7)
{
for (i = 1; i <= (7 - column) ; i++)
{
jzhData += ("</td><td ALIGN=‘CENTER‘><font style=‘font-size:9px;font-family:Arial;color:#f5f5f5‘>\n");
//在这里给日期加事件和样式！
jzhData += (i + "\n");
jzhData += ("</font></td>\n")
}
}
jzhData += ("</table>")
jzhData += ("</table>\n");
jzhData += ("</td></tr></table></div>\n"); $(jzhData2).html(jzhData); clickFun(".currmud", "daysel", "", "", 7);
}
//上个月-下个月,上一年下一年
function showMonth(monNum)
{
var vdate = new Date();
if (monNum == -13 || monNum == 13)
{
if (iscurrmonth == 0)
{
iscurrmonth = vdate.getMonth();
iscurryear = vdate.getFullYear();
}
if (monNum == -13)
{
iscurrmonth = 1;
iscurryear = iscurryear - 1;
}
else if (monNum == 13)
{
iscurrmonth = 1;
iscurryear = iscurryear + 1;
}
}
else
{
if (iscurrmonth == 0)
{
iscurrmonth = vdate.getMonth() + 1;
iscurryear = vdate.getFullYear();
}
if (iscurrmonth != 1 && iscurrmonth != 12)
{
iscurrmonth = iscurrmonth + monNum;
}
else
{
if (monNum > 0)
{
if (iscurrmonth == 1)
{
iscurrmonth = 2;
}
else
{
iscurrmonth = 1;
iscurryear = iscurryear + 1;
}
}
else
{
if (iscurrmonth == 1)
{
iscurrmonth = 12;
iscurryear = iscurryear - 1;
}
else {
iscurrmonth = 11;
}
}
}
}
calendar(getDate(iscurryear + "-" + iscurrmonth + "-01"), jzhData2);
}
//字符串转日期 function getDate(strDate)
{
var date = eval(‘new Date(‘ + strDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ‘)‘);
return date;
}
原文：http://www.cnblogs.com/AndyCf/p/4950395.html