Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Script src = "../JS/connotation. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var c = new Calendar ("c ");
Document. write (c );
</Script>
</Head>
<Body>
<Div>
Normal call: <input type = "text" name = "txt2" onclick = "c. showMoreDay = true; c. show (this);"/> <br/>
<Div style = "height: 262px">
</Div>
Button call: <input type = "text" name = "btntxt" id = "btntxt"/> <input name = "button" value = "*"
Id = "button" type = "button" onclick = "c. showMoreDay = true; c. show (getObjById ('btntxt '), '2017-1-1', this) "/>
<Br/>
<Input type = "text" name = "btntxt3" id = "btntxt3"/> <input name = "button3" value = "*"
Id = "button3" type = "button" onclick = "c. showMoreDay = true; c. show (this, getObjById ('btntxt3 ')"/>
</Div>
</Body>
</Html>
Required jQuery File
Copy codeThe Code is as follows:
Function Calendar (objName)
{
This. style = {
BorderColor: "# 909eff", // border color
HeaderBackColor: "# 909EFF", // header background color
HeaderFontColor: "# ffffff", // header font color
BodyBarBackColor: "# f4f4f4", // calendar title background color
BodyBarFontColor: "#000000", // calendar title Font color
BodyBackColor: "# ffffff", // calendar background color
BodyFontColor: "#000000", // calendar font color
BodyHolidayFontColor: "# ff0000", // holiday font color
WatermarkColor: "# d4d4d4", // background watermark color
MoreDayColor: "# cccccc"
};
This. showMoreDay = false; // whether to display the date of the previous month and next month
This. Obj = objName;
This. date = null;
This. mouseOffset = null;
This. dateInput = null;
This. timer = null;
};
Calendar. prototype. toString = function ()
{
Var str = this. getStyle ();
Str + = '<div Author = "alin" class = "calendar" style = "display: none; "onselectstart =" return false "oncontextmenu =" return false "id =" Calendar "> \ n ';
Str + = '<div Author = "alin" class = "cdrWatermark" id = "cdrWatermark"> </div> <div id = "cdrBody" style = "position: absolute; left: 0px; top: 0px; z-index: 2; width: 140px; "> ';
Str + = this. getHeader ();
Str + = this. getBody ();
Str + = '</div> <div Author = "alin" id = "cdrMenu" style = "position: absolute; left: 0px; top: 0px; z-index: 3; display: none; "onmouseover =" '+ this. obj + '. showMenu (null); "onmouseout =" '+ this. obj + '. hideMenu (); "> </div> ';
Return str;
};
Calendar. prototype. getStyle = function ()
{
Var str = '<style type = "text/css"> \ n ';
Str + = '. calendar {position: absolute; width: 140px! Important; width: 142px; height: 184px! Important; height: 174px; background-color: '+ this. style. bodyBackColor + '; border: 1px solid' + this. style. borderColor + '; left: 0px; top: 0px; z-index: 9999;} \ n ';
Str + = '. cdrHeader {background-color: '+ this. style. headerBackColor + '; width: 140px; height: 22px; font-size: 12px; color:' + this. style. headerFontColor + ';} \ n ';
Str + = '. cdrWatermark {position: absolute; left: 0px; top: 55px; width: 140px; font-family: Arial Black; font-size: 50px; color: '+ this. style. watermarkColor + '; z-index: 1; text-align: center ;}\ n ';
Str + = '. cdrBodyBar {background-color: '+ this. style. bodyBarBackColor + '; font-size: 12px; color:' + this. style. bodyBarFontColor + '; width: 140px; height: 20px;} \ n ';
Str + = '. cdrBody {width: 140px; height: 122px! Important; height: 110px; font-size: 12px; cursor: pointer; color: '+ this. style. bodyFontColor +';} \ n ';
Str + = '. dayOver {height: 16px; padding: 0px; border: 1px solid black; background-color: # f4f4f4;} \ n ';
Str + = '. dayOut {padding: 1px; border: none; height: 16px;} \ n ';
Str + = '. menuOver {background-color: '+ this. style. headerBackColor + '; color:' + this. style. headerFontColor + '; font-size: 12px;} \ n ';
Str + = '. headerOver {border: 1px solid black; background-color: # f4f4f4; color: black; cursor: default;} \ n ';
Str + = '. cdrMenu {font-size: 12px; border: 1px solid #000000; background-color: # ffffff; cursor: default; width: 100%} \ n ';
Str + = 'html> body # Calendar {width: 142px; 174px ;}';
Str + = '</style> \ n ';
Return str;
};
Calendar. prototype. getHeader = function ()
{
Var str = '<table Author = "alin" class = "cdrHeader" cellSpacing = "2" cellPadding = "0"> <tr Author = "alin" align = "center"> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'headerover \ '"onmouseout =" this. className = \ '"id =" previusyear "title =" Previous Year "style =" cursor: pointer; width: 10px; "onclick ="' + this. obj + '. onChangeYear (false); "><</td> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'headerover \ '"onmouseout =" this. className = \ '"id =" previusmonth "title =" last February "style =" cursor: pointer; width: 10px; "onclick ="' + this. obj + '. onChangeMonth (false); "> </td> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'headerover \ '"id =" currentYear "style =" width: 50px; "onclick ="' + this. obj + '. showMenu (true); "onmouseout =" '+ this. obj + '. hideMenu (); this. className = \ '; "> 0 </td> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'headerover \ '"id =" currentMonth "onclick ="' + this. obj + '. showMenu (false); "onmouseout =" '+ this. obj + '. hideMenu (); this. className = \ '; "> 0 </td> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'headerover \ '"onmouseout =" this. className = \ '"id =" nextMonth "title =" next February "style =" cursor: pointer; width: 10px; "onclick ="' + this. obj + '. onChangeMonth (true); ">></td> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'headerover \ '"onmouseout =" this. className = \ '"id =" nextYear "title =" next year "style =" cursor: pointer; width: 10px; "onclick ="' + this. obj + '. onChangeYear (true); ">></td> </tr> \ n ';
Str + = '</table> \ n ';
Return str;
};
Calendar. prototype. getBody = function ()
{
Var n = 0;
Var str = this. getBodyBar ();
Str + = '<table Author = "alin" class = "cdrBody" cellSpacing = "2" cellPadding = "0"> \ n ';
For (I = 0; I <6; I ++)
{
Str + = '<tr Author = "alin" align = "center"> ';
For (j = 0; j <7; j ++)
{
Str + = '<td Author = "alin" class = "dayOut" id = "cdrDay' + (n ++) + '"width =" 13% "> </td> \ n ';
}
Str + = '</tr> ';
}
Str + = '</table> \ n ';
Str + = '<table Author = "alin" class = "cdrBodyBar" cellSpacing = "2" cellPadding = "0"> <tr align = "center" Author = "alin"> <td Author = "alin" style = "cursor: pointer; "onclick =" '+ this. obj + '. getToday (); "> today: '+ new Date (). toFormatString ("mm dd, yyyy") + '</td> </tr> </table> \ n ';
Return str;
};
Calendar. prototype. getBodyBar = function ()
{
Var str = '<table Author = "alin_bar" id = "cdrBodyBar" class = "cdrBodyBar" style = "cursor: move; "cellSpacing =" 2 "cellPadding =" 0 "> <tr Author =" alin_bar "align =" center "> \ n ';
Var day = new Array ('day', 'yi', '2', '3', '4', '5', '6 ');
For (I = 0; I <7; I ++)
{
Str + = '<td Author = "alin_bar">' + day [I] + '</td> \ n ';
}
Str + = '</tr> </table> ';
Return str;
}
Calendar. prototype. getYearMenu = function (year)
{
Var str = '<table Author = "alin" cellSpacing = "0" class = "cdrMenu" cellPadding = "0"> \ n ';
For (I = 0; I <10; I ++)
{
Var _ year = year + I;
Var _ date = new Date (_ year, this. date. getMonth (), this. date. getDate ());
Str + = '<tr Author = "alin" align = "center"> <td Author = "alin" width = "13%" height = "16 "';
If (this. date. getFullYear ()! = _ Year)
{
Str + = 'onmouseover = "this. className = \ 'menuover \ '" onmouseout = "this. className = \'\'"';
}
Else
{
Str + = 'class = "menuOver "';
}
Str + = 'onclick = "'+ this. obj + '. bindDate (\ ''+ _ date. toFormatString ("-") + '\') "> '+ _ year +' year </td> \ n ';
Str + = '</tr> ';
}
Str + = '<tr Author = "alin" align = "center"> <td Author = "alin"> <table Author = "alin" style = "font-size: 12px; width: 100%; "cellSpacing =" 0 "cellPadding =" 0 "> \ n ';
Str + = '<tr Author = "alin" align = "center"> <td Author = "alin" onmouseover = "this. className = \ 'menuover \ '"onmouseout =" this. className = \ '"onclick ="' + this. obj + '. getYearMenu ('+ (year-10) +') "> </td> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'menuover \ '"onmouseout =" this. className = \ '"onclick ="' + this. obj + '. getYearMenu ('+ (year + 10) +') ">></td> <tr> \ n ';
Str + = '</table> </td> </tr> \ n ';
Str + = '</table> ';
Var _ menu = getObjById ("cdrMenu ");
_ Menu. innerHTML = str;
};
Calendar. prototype. getMonthMenu = function ()
{
Var str = '<table Author = "alin" cellSpacing = "0" class = "cdrMenu" cellPadding = "0"> \ n ';
For (I = 1; I <= 12; I ++)
{
Var _ date = new Date (this. date. getFullYear (), I-1, this. date. getDate ());
Str + = '</tr> <tr Author = "alin" align = "center"> <td Author = "alin" height = "16 "';
If (this. date. getMonth () + 1! = I)
{
Str + = 'onmouseover = "this. className = \ 'menuover \ '" onmouseout = "this. className = \'\'"';
}
Else
{
Str + = 'class = "menuOver "';
}
Str + = 'onclick = "'+ this. obj + '. bindDate (\ ''+ _ date. toFormatString ("-") + '\') "> '+ I +' month </td> </tr> \ n ';
}
Str + = '</table> ';
Var _ menu = getObjById ("cdrMenu ");
_ Menu. innerHTML = str;
};
Calendar. prototype. show = function ()
{
If (arguments. length> 3 | arguments. length = 0)
{
Alert ("Sorry! The input parameter is incorrect! ");
Return;
}
Var _ date = null;
Var _ evObj = null;
Var _ initValue = null
For (I = 0; I <arguments. length; I ++)
{
If (typeof (arguments [I]) = "object" & arguments [I]. type = "text ")
{_ Date = arguments [I];}
Else if (typeof (arguments [I]) = "object ")
{_ EvObj = arguments [I];}
Else if (typeof (arguments [I]) = "string ")
{_ InitValue = arguments [I];}
}
_ EvObj = _ evObj | _ date;
InputObj = _ date;
TargetObj = _ evObj
If (! _ Date) {alert ("input parameter error! "); Return ;}
This. dateInput = _ date;
_ Date = _ date. value;
If (_ date = "" & _ initValue) _ date = _ initValue;
This. bindDate (_ date );
Var _ target = getPosition (_ evObj );
Var _ obj = getObjById ("Calendar ");
_ Obj. style. display = "";
_ Obj. style. left = _ target. x + 'px ';
If (document. body. clientHeight-(_ target. y + _ evObj. clientHeight)> = _ obj. clientHeight)
{
_ Obj. style. top = (_ target. y + _ evObj. clientHeight) + 'px ';
}
Else
{
_ Obj. style. top = (_ target. y-_ obj. clientHeight) + 'px ';
}
};
Calendar. prototype. hide = function ()
{
Var obj = getObjById ("Calendar ");
Obj. style. display = "none ";
};
Calendar. prototype. bindDate = function (date)
{
Var _ monthDays = new Array (, 30, 31, 31 );
Var _ arr = date. split ('-');
Var _ date = new Date (_ arr [0], _ arr [1]-1, _ arr [2]);
If (isNaN (_ date) _ date = new Date ();
This. date = _ date;
This. bindHeader ();
Var _ year = _ date. getFullYear ();
Var _ month = _ date. getMonth ();
Var _ day = 1;
Var _ startDay = new Date (_ year, _ month, 1). getDay ();
Var _ previYear = _ month = 0? _ Year-1: _ year;
Var _ previMonth = _ month = 0? 11: _ month-1;
Var _ previDay = _ monthDays [_ previMonth];
If (_ previMonth = 1) _ previDay = (_ previYear % 4 = 0) & (_ previYear0! = 0) | (_ previYear @ 0 = 0 ))? 29:28;
_ PreviDay-= _ startDay-1;
Var _ nextDay = 1;
_ MonthDays [1] = (_ year % 4 = 0) & (_ year0! = 0) | (_ year @ 0 = 0 ))? 29:28;
For (I = 0; I <40; I ++)
{
Var _ dayElement = getObjById ("cdrDay" + I );
_ DayElement. onmouseover = Function (this. Obj + ". onMouseOver (this )");
_ DayElement. onmouseout = Function (this. Obj + ". onMouseOut (this )");
_ DayElement. onclick = Function (this. Obj + ". onClick (this )");
This. onMouseOut (_ dayElement );
_ DayElement. style. color = "";
If (I <_ startDay)
{
// Obtain the date of the previous month
If (this. showMoreDay)
{
Var _ previDate = new Date (_ year, _ month-1, _ previDay );
_ DayElement. innerHTML = _ previDay;
_ DayElement. title = _ previDate. toFormatString ("mm dd, yyyy ");
_ DayElement. value = _ previDate. toFormatString ("-");
_ DayElement. style. color = this. style. moreDayColor;
_ PreviDay ++;
} Else
{
_ DayElement. innerHTML = "";
_ DayElement. title = "";
}
}
Else if (_ day> _ monthDays [_ month])
{
// Obtain the date of the next month
If (this. showMoreDay)
{
Var _ nextDate = new Date (_ year, _ month + 1, _ nextDay );
_ DayElement. innerHTML = _ nextDay;
_ DayElement. title = _ nextDate. toFormatString ("mm dd, yyyy ");
_ DayElement. value = _ nextDate. toFormatString ("-");
_ DayElement. style. color = this. style. moreDayColor;
_ NextDay ++;
} Else
{
_ DayElement. innerHTML = "";
_ DayElement. title = "";
}
}
Else if (I> = new Date (_ year, _ month, 1). getDay () & _ day <= _ monthDays [_ month])
{
// Obtain the date of this month
_ DayElement. innerHTML = _ day;
If (_ day = _ date. getDate ())
{
This. onMouseOver (_ dayElement );
_ DayElement. onmouseover = Function ("");
_ DayElement. onmouseout = Function ("");
}
If (this. isHoliday (_ year, _ month, _ day ))
{
_ DayElement. style. color = this. style. bodyHolidayFontColor;
}
Var _ curDate = new Date (_ year, _ month, _ day );
_ DayElement. title = _ curDate. toFormatString ("mm dd, yyyy ");
_ DayElement. value = _ curDate. toFormatString ("-");
_ Day ++;
}
Else
{
_ DayElement. innerHTML = "";
_ DayElement. title = "";
}
}
Var _ menu = getObjById ("cdrMenu ");
_ Menu. style. display = "none ";
};
Calendar. prototype. bindHeader = function ()
{
Var _ curYear = getObjById ("currentYear ");
Var _ curMonth = getObjById ("currentMonth ");
Var _ watermark = getObjById ("cdrWatermark ");
_ CurYear. innerHTML = this. date. toFormatString ("yyyy ");
_ CurMonth. innerHTML = this. date. toFormatString ("mm Month ");
_ Watermark. innerHTML = this. date. getFullYear ();
};
Calendar. prototype. getToday = function ()
{
Var _ date = new Date ();
This. bindDate (_ date. toFormatString ("-"));
};
Calendar. prototype. isHoliday = function (year, month, date)
{
Var _ date = new Date (year, month, date );
Return (_ date. getDay () = 6 | _ date. getDay () = 0 );
};
Calendar. prototype. onMouseOver = function (obj)
{
Obj. className = "dayOver ";
};
Calendar. prototype. onMouseOut = function (obj)
{
Obj. className = "dayOut ";
};
Calendar. prototype. onClick = function (obj)
{
If (obj. innerHTML! = "") This. dateInput. value = obj. value;
This. hide ();
};
Calendar. prototype. onChangeYear = function (isnext)
{
Var _ year = this. date. getFullYear ();
Var _ month = this. date. getMonth () + 1;
Var _ date = this. date. getDate ();
If (_ year> 999 & _ year <10000)
{
If (isnext) {_ year ++;} else {_ year --;}
}
Else
{
Alert ("year out of range (1000-9999 )! ");
}
This. bindDate (_ year + '-' + _ month + '-' + _ date );
};
Calendar. prototype. onChangeMonth = function (isnext)
{
Var _ year = this. date. getFullYear ();
Var _ month = this. date. getMonth () + 1;
Var _ date = this. date. getDate ();
If (isnext) {_ month ++;} else {_ month --;}
If (_ year> 999 & _ year <10000)
{
If (_ month <1) {_ month = 12; _ year --;}
If (_ month> 12) {_ month = 1; _ year ++ ;}
}
Else
{
Alert ("year out of range (1000-9999 )! ");
}
This. bindDate (_ year + '-' + _ month + '-' + _ date );
};
Calendar. prototype. showMenu = function (isyear)
{
Var _ menu = getObjById ("cdrMenu ");
If (isyear! = Null)
{
Var _ obj = (isyear )? GetObjById ("currentYear"): getObjById ("currentMonth ");
If (isyear)
{
This. getYearMenu (this. date. getFullYear ()-5 );
}
Else
{
This. getMonthMenu ();
}
_ Menu. style. top = (_ obj. offsetTop + _ obj. offsetHeight) + 'px ';
_ Menu. style. left = _ obj. offsetLeft + 'px ';
_ Menu. style. width = _ obj. offsetWidth + 'px ';
}
If (this. timer! = Null) clearTimeout (this. timer );
_ Menu. style. display = "";
}
Calendar. prototype. hideMenu = function ()
{
Var _ obj = getObjById ("cdrMenu ");
This. timer = window. setTimeout (function () {_ obj. style. display = 'none' ;}, 500 );
}
Number. prototype. NaN0 = function ()
{
Return isNaN (this )? 0: this;
}
Date. prototype. toFormatString = function (fs)
{
If (fs. length = 1)
{
Return this. getFullYear () + fs + (this. getMonth () + 1) + fs + this. getDate ();
}
Fs = fs. replace ("yyyy", this. getFullYear ());
Fs = fs. replace ("mm", (this. getMonth () + 1 ));
Fs = fs. replace ("dd", this. getDate ());
Return fs;
}
Var inputObj = null;
Var targetObj = null;
Var dragObj = null;
Var mouseOffset = null;
Function getObjById (obj)
{
If (document. getElementByIdx_x)
{
Return document. getElementByIdx_x (obj );
}
Else
{
Alert ("not supported by browsers! ");
}
}
Function mouseCoords (ev)
{
If (ev. pageX | ev. pageY ){
Return {x: ev. pageX, y: ev. pageY };
}
Return {
X: ev. clientX + document. body. scrollLeft-document. body. clientLeft,
Y: ev. clientY + document. body. scrollTop-document. body. clientTop
};
}
Function getPosition (e)
{
Var left = 0;
Var top = 0;
While (e. offsetParent ){
Left + = e. offsetLeft + (e. currentStyle? (ParseInt (e. currentStyle. borderLeftWidth). NaN0 (): 0 );
Top + = e. offsetTop + (e. currentStyle? (ParseInt (e. currentStyle. borderTopWidth). NaN0 (): 0 );
E = e. offsetParent;
}
Left + = e. offsetLeft + (e. currentStyle? (ParseInt (e. currentStyle. borderLeftWidth). NaN0 (): 0 );
Top + = e. offsetTop + (e. currentStyle? (ParseInt (e. currentStyle. borderTopWidth). NaN0 (): 0 );
Return {x: left, y: top };
}
Function getMouseOffset (target, ev)
{
Ev = ev | window. event;
Var docPos = getPosition (target );
Var mousePos = mouseCoords (ev );
Return {x: mousePos. x-docPos. x, y: mousePos. y-docPos. y };
}
Function closeCalendar (evt ){
Evt = evt | window. event;
Var _ target = evt.tar get | evt. srcElement;
If (! _ Target. getAttribute ("Author") & _ target! = InputObj & _ target! = TargetObj)
{
GetObjById ("Calendar"). style. display = "none ";
}
}
Function dragStart (evt ){
Evt = evt | window. event;
Var _ target = evt.tar get | evt. srcElement;
If (_ target. getAttribute ("Author") = "alin_bar ")
{
DragObj = getObjById ("Calendar ");
MouseOffset = getMouseOffset (dragObj, evt );
}
}
Function drag (evt)
{
Evt = evt | window. event;
If (dragObj)
{
Var mousePos = mouseCoords (evt );
DragObj. style. left = (mousePos. x-mouseOffset. x) + 'px ';
DragObj. style. top = (mousePos. y-mouseOffset. y) + 'px ';
}
}
// Drag to end
Function dragEnd (evt)
{
DragObj = null;
}
Document. onclick = closeCalendar;
Document. onmousedown = dragStart;
Document. onmousemove = drag;
Document. onmouseup = dragEnd;