JavaScript calendar implementation code _ time and date

I have written a lot of calendars, most of which are used for display. Recently, the time selector that can be accurate to seconds is used in the project, so I wrote one. The effect is as follows:

The javascript code is as follows:

The Code is as follows:

Var Calendar = function (){
Var self = this;

Self. box = document. createElement ("p ");
Self. head = document. createElement ("p ");
Self. datePlace;
Self. body = document. createElement ("p ");
Self. selectDay;
Self. foot = document. createElement ("p ");
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": "<", "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 = "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 (num <0 | num> max ){
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 = ["day", "1", "2", "3", "4", "5", "6"];
For (var I = 0; I DomPgm. appendChild (cDay (weeks [I]);
}

// Last month's White List
For (var I = 0; I DomPgm. appendChild (cDay (""));
}
// Monthly information
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 );
}
// Fill in the white list for next month ....

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 code:

The Code is as follows:

. 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;
}