The effect is as follows:
Javascript Code As follows:
Copy code The Code is as follows: 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 ();
}< BR >};
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 <weeks. length; I ++ ){
Dompgm. appendchild (CDAY (weeks [I]);
}
// Last month's White List
For (VAR I = 0; I <week; 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 ();
}< BR >};
CSS code:Copy codeThe 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: 24 PX;
Height: 12px;
Font-size: 12px;
}
. Cal-foot. okbtn {
Width: 50px;
Background-color: # CCC;
Cursor: pointer;
}
. cal-body {
background-color: # 9cf;
}< br>. cal-body span {
display: inline-block;
width: 30px;
text-align: center;
cursor: pointer;
}< br>. cal-body. nowday {
background-color: # f00;
}< br>. cal-body. selectday {
text-Decoration: underline;
}