效果圖
http://www.hui12.com/nbin/csdn/jsDate/demo.html
https://nbin2008.github.io/demo/jsDate/index.html
日期上面都添加了自定義屬性，友善追加時間
html部分，使用說明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js日期試玩</title>
<style type="text/css">
*{ margin: 0; padding: 0; }
.box{ width: 350px; margin: 50px auto 0; }
.box>div>div{ width: 50px; height: 50px; float: left; text-align: center; line-height: 50px; }
.siblings{ color:#ccc; }
</style>
<script src="jquery-2.0.3.js"></script>
<script src="date.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function createDiv(){
var i = 0;
var arr = ["日","一","二","三","四","五","六"];
for( i=0; i<7; i++ ){
$(".week").append("<div>"+ arr[i] +"</div>")
}
for( i=0; i<42; i++ ){
$(".date").append("<div></div>")
}
}
createDiv()
var a = new DateWeek($(".date"));
a.setDate(2015,9).setDate(2015,9);
/*
* 需要42個元素用于顯示日期，外圍有一個父級$obj,JQ對象
* 調用需要傳入父級元素,設定日期用 setDate(年，月)方法
* siblings類為上下月
* 按鈕沒有，需要啥樣式自己寫，事件給直接給setDate傳參即可
*/
});
</script>
</head>
<body>
<div class="box">
<div class="week"></div>
<div class="date"></div>
</div>
</body>
</html>
js部分
(function(window,$){
var proto = {
getDay: function(y, m) {
var mday = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) //判斷是否是閏月
mday[1] = 29;
return mday[m - 1];
},
getWeek: function(y, m, d) {
var wk;
if (m <= 12 && m >= 1) {
for (var i = 1; i < m; ++i) {
d += this.getDay(y, i);
}
}
/*根據日期計算星期的公式*/
wk = (y - 1 + (y - 1) / 4 - (y - 1) / 100 + (y - 1) / 400 + d) % 7;
//0對應星期天，1對應星期一
return parseInt(wk);
},
getName: function(year,month,day){
return year + "-" + month + "-" + day;
},
getLast: function(y,m){
if( m-1 == 0){
return {
y: y-1,
m: 12,
d: this.getDay(y-1, 12)
};
}else{
return {
y: y,
m: m-1,
d: this.getDay(y, m-1)
};
}
},
getNext: function(y,m){
if( m+1 > 12 ){
return {
y: y+1,
m: 1,
d: this.getDay(y+1, 1)
};
}else{
return {
y: y,
m: m+1,
d: this.getDay(y, m+1)
};
};
},
setDay: function(name,day,index,siblings){
var $div = this.$obj.find("div");
$div.eq(index).text(day).attr("name",name);
siblings && $div.eq(index).addClass("siblings");
},
clearDiv: function(){
var $div = this.$obj.find("div");
$div.removeAttr("name").removeClass().text('');
},
setDate: function(year, month){
this.clearDiv();
var $div = this.$obj.find("div");
var dayNumber = this.getDay(year, month);
var firstNumber = this.getWeek(year,month,1);
var lastNumber = this.getWeek(year,month,dayNumber);
var weekNumber = (dayNumber - (7 - (firstNumber==0?7:firstNumber) ) - (lastNumber + 1)) / 7;
var day = 1;
var index = 0;
var name;
var last = this.getLast(year, month);
var lastDay = last.d - firstNumber + 1;
for( var i=0; i<firstNumber; i++ ){
name = this.getName(last.y, last.m, lastDay);
this.setDay(name,lastDay,index,1);
lastDay++;
index++;
};
if( firstNumber == 0 ){
lastDay = last.d - 7 + 1;
for( var i=0; i<7; i++ ){
name = this.getName(last.y, last.m, lastDay);
this.setDay(name,lastDay,index,1);
lastDay++;
index++;
};
weekNumber--;
};
for( i= firstNumber; i<7; i++ ){
name = this.getName(year,month,day);
this.setDay(name,day,index);
index++;
day++;
};
for( i=0; i<weekNumber; i++ ){
for( var k=0; k<7; k++){
name = this.getName(year,month,day);
this.setDay(name,day,index);
day++;
index++;
};
};
for( i=0; i<lastNumber+1; i++ ){
name = this.getName(year,month,day);
this.setDay(name,day,index);
index++;
day++;
};
var next = this.getNext(year,month);
day = 1;
while( $div[index] ){
name = this.getName(next.y, next.m, day);
this.setDay(name,day,index,1);
day++;
index++;
};
return this;
},
init: function($obj){
this.$obj = $obj;
return this;
}
}
function DateWeek($obj){
return this.init($obj);
};
DateWeek.prototype = proto;
DateWeek.prototype.constructor = DateWeek;
window.DateWeek = DateWeek;
})(window,jQuery);
這個js隻是做出了日期的排列，其他的事情可以通過日期上面綁定的屬性追加