效果如下:
javascript 代码如下:
复制代码 代码如下:
var Calendar = function){
var self = this;
self.box = document.createElement”div”);
self.head = document.createElement”div”);
self.datePlace;
self.body = document.createElement”div”);
self.selectDay;
self.foot = document.createElement”div”);
self.timePlace;
self.dateInfo = {
“now” : new Date),
“getDate” : functiond){
d = d || self.dateInfo[“now”];
return d.getFullYear) + “-” + d.getMonth)+1) + “-” + d.getDate);
},
“getTime” : functiond){
d = d || self.dateInfo[“now”];
return d.getHours) + “:” + d.getMinutes) + “:” + d.getSeconds);
},
“getSelectTime” : functiond){
d = d || self.dateInfo[“now”];
return d.getFullYear) + “-” + d.getMonth)+1) + “-” + self.dateInfo.selectDay +
” ” + d.getHours) + “:” + d.getMinutes) + “:” + d.getSeconds);
},
“getDaysCount” : functiond){
d = d || self.dateInfo[“now”];
return new Dated.getFullYear),d.getMonth)+1,0)).getDate);
},
“weekOfFirstDay” : functiond){
d = d || self.dateInfo[“now”];
return new Dated.getFullYear),d.getMonth),1)).getDay);
}
};
self.dateInfo.selectDay = self.dateInfo[“now”].getDate);
this.init);
};
Calendar.prototype = {
init : function){
this.initDom);
},
initDom : function){
var self = this;
//head
var o = {“preYear”:”<<","preMonth":"”,”nextYear”:”>>”};
forvar i in o){
var __ = o[i], tag = document.createElement”span”);
tag.innerHTML = __.toString);
i!=”date” && tag.onclick = functionfn){
return function){fn.callself);}
})self[i])
);
i==”date” && tag.className = “dateShow”,self.datePlace = tag);
self.head.appendChildtag);
}
self.head.className = “cal-head”;
//body
self.buildBody);
self.body.className = “cal-body”;
//foot
self.timePlace = document.createElement”span”);
var dInfo = self.dateInfo;
var Valid = functionnum,max){
num = /^\d+$/.testnum) ? num : -1;
ifnummax){
return false;
}
return true;
};
var times = {“hour”:[“getHours”,”setHours”],”minutes”:[“getMinutes”,”setMinutes”],”seconds”:[“getSeconds”,”setSeconds”]};
forvar i in times){
var t = document.createElement”span”);
var tInput = document.createElement”input”);
t.innerHTML = tInput.value = dInfo[“now”][times[i][0]]);
tInput.style.display = “none”;
t.onclick = functiontIpt){
return function){
this.style.display = “none”;
tIpt.style.display = “inline-block”;
tIpt.select);
}
})tInput);
tInput.onblur = functiont,setFn){
return function){
this.style.display = “none”;
ifValidthis.value,setFn==”setHours”?23:59))){
t.innerHTML = this.value;
dInfo[“now”][setFn]parseIntthis.value));
}
t.style.display = “inline-block”;
}
})t,times[i][1]);
self.timePlace.appendChildt);
self.timePlace.appendChildtInput);
ifi!=”seconds”){
var sp = document.createElement”span”);
sp.innerHTML = “:”;
self.timePlace.appendChildsp);
}
}
self.timePlace.className = “timeShow”;
var okBtn = document.createElement”span”);
okBtn.innerHTML = “Ok”;
okBtn.className = “okBtn”;
okBtn.onclick = function){
alertdInfo[“getSelectTime”]));
};
self.foot.appendChildself.timePlace);
self.foot.appendChildokBtn);
self.foot.className = “cal-foot”;
//relation
this.box.appendChildself.head);
this.box.appendChildself.body);
this.box.appendChildself.foot);
this.box.className = “cal-box”;
document.body.appendChildthis.box);
},
buildBody : function){
var self = this,dInfo = self.dateInfo, week = dInfo[“weekOfFirstDay”]),days = dInfo[“getDaysCount”]),day = dInfo[“now”].getDate);
var cDay = functioninner,ev){
var tag = document.createElement”span”);
tag.innerHTML = inner;
ev && tag.onclick = function){
self.selectDay.className = self.selectDay.className.replace” selectDay”,””);
self.selectDay = this;
self.selectDay.className = self.selectDay.className + ” selectDay”;
self.dateInfo.selectDay = inner;
});
return tag;
};
var domPgm = document.createDocumentFragment);
//weedInfo
var weeks = [“天”,”一”,”二”,”三”,”四”,”五”,”六”];
forvar i=0;i<weeks.length;i++){
domPgm.appendChildcDayweeks[i]));
}
//上个月的补白
forvar i=0;i<week;i++){
domPgm.appendChildcDay””));
}
//本月信息
parseIntself.dateInfo.selectDay) > days && self.dateInfo.selectDay = days);
forvar i=1;i<=days;i++){
var tag = cDayi,true);
self.dateInfo.selectDay == i && self.selectDay = tag,tag.className=” selectDay”);
i===day && tag.className=tag.className+” nowDay”);
domPgm.appendChildtag);
}
//下个月的补白….
self.body.innerHTML = “”;
self.body.appendChilddomPgm);
},
dateShow : function){
this.datePlace.innerHTML = this.dateInfo[“getDate”]);
},
updateUI : function){
this.dateShow);
this.buildBody);
},
preYear : function){
this.dateInfo[“now”].setYearthis.dateInfo[“now”].getFullYear)-1);
this.updateUI);
},
preMonth : function){
var dInfo = this.dateInfo,m = dInfo[“now”].getMonth);
–m;
m<0 && m = 11,dInfo["now"].setYearthis.dateInfo["now"].getFullYear)-1));
dInfo[“now”].setMonthm);
this.updateUI);
},
nextMonth : function){
var dInfo = this.dateInfo,m = dInfo[“now”].getMonth);
++m;
m>11 && m = 0,dInfo[“now”].setYearthis.dateInfo[“now”].getFullYear)+1));
dInfo[“now”].setMonthm);
this.updateUI);
},
nextYear : function){
this.dateInfo[“now”].setYearthis.dateInfo[“now”].getFullYear)+1);
this.updateUI);
}
};
css代码:
复制代码 代码如下:
.cal-box{
width:210px;
font-family:”Courier New”, Courier, monospace;
font-size:14px;
}
.cal-box span{
display:inline-block;
text-align:center;
}
.cal-head{
background-color:#FC3;
}
.cal-head span{
width:20px;
font-weight:bold;
color:#69C;
text-decoration:underline;
cursor:pointer;
}
.cal-head .dateShow{
width:130px;
text-decoration:none;
}
.cal-foot{
background-color:#FC3;
}
.cal-foot .timeShow{
width:160px;
text-align:left;
}
.cal-foot .timeShow input{
width:24px;
height:12px;
font-size:12px;
}
.cal-foot .okBtn{
width:50px;
background-color:#CCC;
cursor:pointer;
}
.cal-body{
background-color:#9CF;
}
.cal-body span{
display:inline-block;
width:30px;
text-align:center;
cursor:pointer;
}
.cal-body .nowDay{
background-color:#F00;
}
.cal-body .selectDay{
text-decoration:underline;
}