<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.8.2.js"></script>
<style>
.box_calendar_title {
background: #F6F6F6;
width: 230px;
height: 40px;
line-height: 40px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
font-family: "微软雅黑";
font-size: 14px;
}
.box_member_calendar {
height: 180px;
width: 230px;
margin-top: 3px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.Calendar {
font-family: Verdana;
font-size: 9pt;
background-color: #F6F6F6;
text-align: center;
width: 210px;
height: 150px;
padding: 10px;
line-height: 1.5em;
}
#idCalendarPre {
cursor: pointer;
float: left;
padding-right: 5px;
}
#idCalendarNext {
cursor: pointer;
float: right;
padding-right: 5px;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.Calendar table td {
font-size: 11px;
padding: 1px;
}
td, th {
display: table-cell;
vertical-align: inherit;
}
</style>
</head>
<body>
<form action="提交到哪里" method="post">
<div class="box_calendar_title">
<p align="center">简单的时间控件,事件可以自己做</p>
</div>
<div class="box_member_calendar">
<div class="Calendar">
<div ><<</div>
<div >>></div>
<span ></span>- <span ></span>
<table>
<thead>
<tr>
<td>SUN</td>
<td>MON</td>
<td>TUE</td>
<td>WEO</td>
<td>THU</td>
<td>FRI</td>
<td>SAT</td>
</tr>
</thead>
<tbody >
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</body>
</html>
<script>
$(function () {
DateTimePicker();
})
function DateTimePicker() {
//时间对象
var dateTime = new Date();
//年
$(\'#idCalendarYear\').text(dateTime.getFullYear())
//月
$(\'#idCalendarMonth\').text(dateTime.getMonth() + 1)
//日
var day = dateTime.getDate()
Else(dateTime)
//日期高调提示
$(\'#idCalendar td\').removeAttr("Class");
var $day = "";
//由于下面把天数改为1号，这里把天数改回原来天数
dateTime.setDate(day);
for (var i = 0; i < $(\'#idCalendar td\').length; i++) {
$day = $($(\'#idCalendar td\')[i]);
if ($day.text() == dateTime.getDate()) {
$day.addClass("onToday");
break;
}
}
//上一月
$(\'#idCalendarPre\').click(function () {
dateTime = new Date(dateTime.getFullYear(), dateTime.getMonth() - 1);
Else(dateTime)
})
//下一月
$(\'#idCalendarNext\').click(function () {
dateTime = new Date(dateTime.getFullYear(), dateTime.getMonth() + 1);
Else(dateTime)
})
}
function Else(dateTime) {
//获取年份
var year = dateTime.getFullYear();
//获取当前月份
var mouth = dateTime.getMonth() + 1;
//定义当月的天数；
var days;
if (mouth == 2) {
days = year % 4 == 0 ? 29 : 28;
}
else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) {
//月份为：1,3,5,7,8,10,12 时，为大月.则天数为31；
days = 31;
}
else {
//其他月份，天数为：30.
days = 30;
}
var index = 0;
$(\'#idCalendar td\').text("")
$(\'#idCalendar td\').removeAttr("Class");
for (var i = 1; i <= days; i++) {
if (i == 1) {
//把天数改为1号
dateTime.setDate(1);
if (dateTime.getDay() == 0) {
$($(\'#idCalendar td\')[0]).text(i);
index = 1;
}
else if (dateTime.getDay() == 1) {
$($(\'#idCalendar td\')[1]).text(i);
index = 2;
}
else if (dateTime.getDay() == 2) {
$($(\'#idCalendar td\')[2]).text(i);
index = 3;
}
else if (dateTime.getDay() == 3) {
$($(\'#idCalendar td\')[3]).text(i);
index = 4;
}
else if (dateTime.getDay() == 4) {
$($(\'#idCalendar td\')[4]).text(i);
index = 5;
}
else if (dateTime.getDay() == 5) {
$($(\'#idCalendar td\')[5]).text(i);
index = 6;
}
else if (dateTime.getDay() == 6) {
$($(\'#idCalendar td\')[6]).text(i);
index = 7;
}
}
else {
$($(\'#idCalendar td\')[index]).text(i);
index = index + 1;
}
}
//绑定年
$(\'#idCalendarYear\').text(dateTime.getFullYear());
//绑定月
$(\'#idCalendarMonth\').text(dateTime.getMonth() + 1);
}
</script>