效果如下:
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 : function(d){
d = d || self.dateinfo[now];
return d.getfullyear() + - + (d.getmonth()+1) + - + d.getdate();
},
gettime : function(d){
d = d || self.dateinfo[now];
return d.gethours() + : + d.getminutes() + : + d.getseconds();
},
getselecttime : function(d){
d = d || self.dateinfo[now];
return d.getfullyear() + - + (d.getmonth()+1) + - + self.dateinfo.selectday +
+ d.gethours() + : + d.getminutes() + : + d.getseconds();
},
getdayscount : function(d){
d = d || self.dateinfo[now];
return (new date(d.getfullyear(),d.getmonth()+1,0)).getdate();
},
weekoffirstday : function(d){
d = d || self.dateinfo[now];
return (new date(d.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:,nextyear:>>};
for(var i in o){
var __ = o[i], tag = document.createelement(span);
tag.innerhtml = __.tostring();
i!=date && (tag.onclick = (function(fn){
return function(){fn.call(self);}
})(self[i])
);
i==date && (tag.classname = dateshow,self.dateplace = tag);
self.head.appendchild(tag);
}
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 = function(num,max){
num = /^\d+$/.test(num) ? num : -1;
if(nummax){
return false;
}
return true;
};
var times = {hour:[gethours,sethours],minutes:[getminutes,setminutes],seconds:[getseconds,setseconds]};
for(var 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 = (function(tipt){
return function(){
this.style.display = none;
tipt.style.display = inline-block;
tipt.select();
}
})(tinput);
tinput.onblur = (function(t,setfn){
return function(){
this.style.display = none;
if(valid(this.value,(setfn==sethours?23:59))){
t.innerhtml = this.value;
dinfo[now][setfn](parseint(this.value));
}
t.style.display = inline-block;
}
})(t,times[i][1]);
self.timeplace.appendchild(t);
self.timeplace.appendchild(tinput);
if(i!=seconds){
var sp = document.createelement(span);
sp.innerhtml = :;
self.timeplace.appendchild(sp);
}
}
self.timeplace.classname = timeshow;
var okbtn = document.createelement(span);
okbtn.innerhtml = ok;
okbtn.classname = okbtn;
okbtn.onclick = function(){
alert(dinfo[getselecttime]());
};
self.foot.appendchild(self.timeplace);
self.foot.appendchild(okbtn);
self.foot.classname = cal-foot;
//relation
this.box.appendchild(self.head);
this.box.appendchild(self.body);
this.box.appendchild(self.foot);
this.box.classname = cal-box;
document.body.appendchild(this.box);
},
buildbody : function(){
var self = this,dinfo = self.dateinfo, week = dinfo[weekoffirstday](),days = dinfo[getdayscount](),day = dinfo[now].getdate();
var cday = function(inner,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 = [天,一,二,三,四,五,六];
for(var i=0;idompgm.appendchild(cday(weeks[i]));
}
//上个月的补白
for(var i=0;idompgm.appendchild(cday());
}
//本月信息
parseint(self.dateinfo.selectday) > days && (self.dateinfo.selectday = days);
for(var i=1;ivar tag = cday(i,true);
self.dateinfo.selectday == i && (self.selectday = tag,tag.classname= selectday);
i===day && (tag.classname=tag.classname+ nowday);
dompgm.appendchild(tag);
}
//下个月的补白....
self.body.innerhtml = ;
self.body.appendchild(dompgm);
},
dateshow : function(){
this.dateplace.innerhtml = this.dateinfo[getdate]();
},
updateui : function(){
this.dateshow();
this.buildbody();
},
preyear : function(){
this.dateinfo[now].setyear(this.dateinfo[now].getfullyear()-1);
this.updateui();
},
premonth : function(){
var dinfo = this.dateinfo,m = dinfo[now].getmonth();
--m;
mdinfo[now].setmonth(m);
this.updateui();
},
nextmonth :　function(){
var dinfo = this.dateinfo,m = dinfo[now].getmonth();
++m;
m>11 && (m = 0,dinfo[now].setyear(this.dateinfo[now].getfullyear()+1));
dinfo[now].setmonth(m);
this.updateui();
},
nextyear : function(){
this.dateinfo[now].setyear(this.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;
}