JavaScript 달력 구현 code_time 및 날짜

효과는 다음과 같습니다.

자바스크립트 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

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.getFullYear() "-" (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.getFullYear() "-" (d.getMonth() 1) "-" self.dateInfo.selectDay
" " d.getHours() ":" d.getMinutes() ":" d .getSeconds();
},
"getDaysCount" : function(d){
d = d || self.dateInfo["지금"];
return (new Date(d.getFullYear(),d.getMonth() 1,0)).getDate();
},
"weekOfFirstDay" : function(d){
d = d || self.dateInfo["지금"];
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":"<","date":self.dateInfo["getDate"](),"nextMonth ":">","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=="날짜" && (tag.className = "dateShow",self.datePlace = 태그);

self.head.appendChild(태그);
}
self.head.className = "cal-head";

//body
self.buildBody();
self.body.className = "칼바디";

//foot
self.timePlace = document.createElement("span");

var dInfo = self.dateInfo;
var Valid = function(num,max){
num = /^d $/.test(num) ? 번호 : -1;
if(num<0 || num>max){
false를 반환합니다.
}
true를 반환합니다.
};

var 시간 = {"시간":["getHours","setHours"],"분":["getMinutes","setMinutes"],"초":["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 = "없음";
t.onclick = (함수(tIpt){
반환 함수(){
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!="seconds"){
var sp = document.createElement("span");
sp.innerHTML = ":";
self.timePlace.appendChild(sp);
}
}
self.timePlace.className = "timeShow";

var okBtn = document.createElement("span");
okBtn.innerHTML = "알겠습니다";
okBtn.className = "okBtn";
okBtn.onclick = function(){
alert(dInfo["getSelectTime"]());
};

self.foot.appendChild(self.timePlace);
self.foot.appendChild(okBtn);
self.foot.className = "칼-풋";

//관계
this.box.appendChild(self.head);
this.box.appendChild(self.body);
this.box.appendChild(self.foot);

this.box.className = "칼박스";
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 = 내부;

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

self.dateInfo.selectDay =
});

반품 태그;
};
var domPgm = document.createDocumentFragment();
//weedInfo
varweeks = ["天","一","이","삼","사","五","六"];
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;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(태그);
}
//下个月的补白....

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["지금"].setMonth(m);
this.updateUI();
},
nextMonth :　function(){
var dInfo = this.dateInfo,m = dInfo["now"].getMonth();
음;
m>11 && (m = 0,dInfo["now"].setYear(this.dateInfo["now"].getFullYear() 1));
dInfo["지금"].setMonth(m);
this.updateUI();
},
nextYear : function(){
this.dateInfo["now"].setYear(this.dateInfo["now"].getFullYear() 1);
this.updateUI();
}
};

css代码:

复主代码 代码如下:

.cal-box{
너비:210px;
글꼴 계열:"Courier New", Courier, 고정 폭;
글꼴 크기:14px;
}
.cal-box 범위{
display:inline-block;
텍스트 정렬:가운데;
}

.cal-head{
배경색:#FC3;
}
.cal-head 범위{
너비:20px;
글꼴 두께:굵게;
색상:#69C;
텍스트 장식:밑줄;
커서:포인터;
}
.cal-head .dateShow{
너비:130px;
텍스트 장식:없음;
}

.cal-foot{
배경색:#FC3;
}
.cal-foot .timeShow{
너비:160px;
텍스트 정렬:왼쪽;
}
.cal-foot .time 입력 표시{
width:24px;
높이:12px;
글꼴 크기:12px;
}
.cal-foot .okBtn{
너비:50px;
배경색:#CCC;
커서:포인터;
}

.cal-body{
배경색:#9CF;
}
.cal-body 범위{
display:inline-block;
너비:30px;
텍스트 정렬:가운데;
커서:포인터;
}
.cal-body .nowDay{
배경색:#F00;
}
.cal-body .selectDay{
텍스트 장식:밑줄;
}