效果如下:

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":"<<","preMonth":"","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;i<weeks.length;i++){
domPgm.appendChild(cDay(weeks[i]));
}

//上個月的補白
for(var i=0;i<week;i++){
domPgm.appendChild(cDay(""));
}
//本月信息
parseInt(self.dateInfo.selectDay) > days && (self.dateInfo.selectDay = days);
for(var i=1;i<=days;i++){
var 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;
m<0 && (m = 11,dInfo["now"].setYear(this.dateInfo["now"].getFullYear()-1));
dInfo["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;
}

總結

以上是生活随笔為你收集整理的JavaScript日历实现代码_时间日期(几款实用的前端日历时间日期选择控件)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。