JavaScript カレンダー実装コード_時刻と日付

効果は次のとおりです:

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["今"];
return d.getFull Year() "-" (d.getMonth() 1) "-" d.getDate();
},
"getTime" : function(d){
d = d || self.dateInfo["今"];
return d.getHours() ":" d.getMinutes() ":" d.getSeconds();
},
"getSelectTime" : function(d){
d = d || self.dateInfo["今"];
return d.getFull Year() "-" (d.getMonth() 1) "-" self.dateInfo.selectDay
" " d.getHours() ":" d.getMinutes() ":" d .getSeconds();
},
"getDaysCount" : function(d){
d = d || self.dateInfo["今"];
return (new Date(d.getFull Year(),d.getMonth() 1,0)).getDate();
},
"weekOfFirstDay" : function(d){
d = d || self.dateInfo["今"];
return (new Date(d.getFull Year(),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 = {"pre Year":"<<","preMonth":"<","date":self.dateInfo["getDate"](),"nextMonth ":">","来年":">>"};
for(var i in o){
var __ = o[i], tag = document.createElement("span");
tag.innerHTML = __.toString();
i!="日付" && (tag.onclick = (function(fn){
return function(){fn.call(self);}
})(self[i])
);
i=="date" && (tag.className = "dateShow",self.datePlace = tag);

self.head.appendChild(タグ);
}
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) ?数値: -1;
if(nummax){
return false;
}
true を返します。
};

var time = {"hour":["getHours","setHours"]," minutes":["getMinutes","setMinutes"],"秒":["getSeconds","setSeconds" ]};
for(var i intimes){
var t = document.createElement("span");
var tInput = document.createElement("input");
t.innerHTML = tInput.value = dInfo["now"][times[i][0]]();

tInput.style.display = "なし";
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 = "インラインブロック";
}
})(t,times[i][1]);

self.timePlace.appendChild(t);
self.timePlace.appendChild(tInput);

if(i!="秒"){
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";

//関係
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, year = dInfo["weekOfFirstDay"](),days = dInfo["getDaysCount"](), day = dInfo["now"].getDate();
var cDay = function(inner,ev){
var tag = document.createElement("span");
tag.innerHTML = 内部;

ev && (tag.onclick = function(){
self.selectDay.className = self.selectDay.className.replace(" selectDay","");
self.selectDay = this ;
self.selectDay.className = self.selectDay.className "

self.dateInfo.selectDay = inner;

タグを返します。
};
var domPgm = document.createDocumentFragment();
//weedInfo
var months = ["天","一","二","三","四","五","六"];
for(var i=0;idomPgm.appendChild(cDay(weeks[i]));
}

//上月の补白
for(var i=0;idomPgm.appendChild(cDay(""));
}
//今月の情報
parseInt(self.dateInfo.selectDay) >日数 && (self.dateInfo.selectDay = 日数);
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(タグ);
}
//下の月の补白....

self.body.innerHTML = "";
self.body.appendChild(domPgm);

},
dateShow : function(){
this.datePlace.innerHTML = this.dateInfo["getDate"]();
},
updateUI : function(){
this.dateShow();
this.buildBody();
},
pre Year : function(){
this.dateInfo["now"].set Year(this.dateInfo["now"].getFull Year()-1);
this.updateUI();
},
preMonth : function(){
var dInfo = this.dateInfo,m = dInfo["now"].getMonth();
--m;
m<0 && (m = 11,dInfo["now"].setyear(this.dateInfo["now"].getFull Year()-1));
dInfo["now"].setMonth(m);
this.updateUI();
},
nextMonth : function(){
var dInfo = this.dateInfo,m = dInfo["now"].getMonth();
ん;
m>11 && (m = 0,dInfo["now"].set Year(this.dateInfo["now"].getFull Year() 1));
dInfo["now"].setMonth(m);
this.updateUI();
},
next Year : function(){
this.dateInfo["now"].set Year(this.dateInfo["now"].getFull Year() 1);
this.updateUI();
}
};

css代記入:

复制代記入 代記入如下:

.cal-box{
幅:210px;
font-family:"Courier New"、Courier、等幅;
フォントサイズ:14px;
}
.cal-box span{
display:inline-block;
text-align:center;
}

.cal-head{
背景色:#FC3;
}
.cal-head scan{
width:20px;
フォントの太さ:太字;
カラー:#69C;
テキスト装飾:下線;
カーソル:ポインタ;
}
.cal-head .dateShow{
width:130px;
テキスト装飾:なし;
}

.cal-foot{
背景色:#FC3;
}
.cal-foot .timeShow{
width:160px;
text-align:left;
}
.cal-foot .timeShow input{
width:24px;
高さ:12px;
フォントサイズ:12px;
}
.cal-foot .okBtn{
width:50px;
背景色:#CCC;
カーソル:ポインタ;
}

.cal-body{
背景色:#9CF;
}
.cal-body span{
display:inline-block;
幅:30px;
text-align:center;
カーソル:ポインタ;
}
.cal-body .nowDay{
背景色:#F00;
}
.cal-body .selectDay{
text-decoration:underline;
}