js日历控件

1、js文件calendar.js

/*

----------- Calendar : Day Selecter ------------

author : satellite @ cnvery

create : 2005-11-17

site : http://www.cnvery.net/
------------------------------------------------

----------- Example ----------------------------

<input type='text' name='someDateField' size='13' readonly='readonly' onclick='javascript:calendar.setHook(this)' />

so easy:

onclick='javascript:calendar.setHook(this)'

and you can set the field readonly

readonly='readonly'

------------------------------------------------

*/

function cnVeryCalendar()

{

//Style

var border_frame = '#468DDD';

var border_inner = '#f6f6f6';

var fore_frameCaption = '#ffffff';

var back_frameCaption = '#468DDD';

var fore_currentMonth = '#ff0000';

var back_weekName = '#e9e9e9';

var back_nullDay = '#fafafa';

var fore_dayMouseOver = '#ff6600';

var back_dayMouseOver = '#eeeeee';

var font_cnChar = 'font-family:宋体,sans-serif; font-size:12px;';

var font_numChar = 'font-family:tahoma,arial,sans-seirf; font-size:11px;';

var style_cell = 'line-height:14px; border-color:' + border_inner;

var today_decoration = "font-weight:bold; background:url('bbs/images/calendar_today.gif') center no-repeat;"

// "font-weight:bold"

//Declare

var reciever;

var today = new Date();

var y = today.getFullYear();

var m = today.getMonth() + 1;

//Return Max Days In The Month

this.daysInMonth = function(y, m)

{

switch (m)

{

case 1:

case 3:

case 5:

case 7:

case 8:

case 10:

case 12:

return 31;

case 4:

case 6:

case 9:

case 11:

return 30;

case 2:

//Is Leep Year

if (y % 4 != 0)

{

return 28;

}

if (y % 100 == 0)

{

return y % 400 == 0 ? 29 : 28;

}

return 29;

}

}

//Generate Codes

this.generateCalendarTable = function()

{

var i;

var j = new Date(y, m-1, 1).getDay();

var k = this.daysInMonth(y, m);

var body = '';

//Frame Table Header

body += "<table align='center' cellpadding='2' cellspacing='1' width='100%' height='100%' style='border:1px " + border_frame + " solid; background:white;'>";

body += " <tr>";

body += " <td style='background:" + back_frameCaption + ";" + font_cnChar + "' height='20'>";

body += " <div style='color:" + fore_frameCaption + "; float:left'><b>日历控件</b></div>";

body += " <div style='float:right'>";

body += " <a href=""javascript:calendar.setValue('')"" style='color:" + fore_frameCaption + "; text-decoration:none;" + font_cnChar + "'>[擦除]</a> ";

body += " <a href='javascript:calendar.fadeOut()' style='color:" + fore_frameCaption + "; text-decoration:none;" + font_cnChar + "'>[关闭]</a>";

body += " </div>";

body += " </td>";

body += " </tr>";

body += " <tr>";

body += " <td style='padding-bottom:0px'>";

body += " <table align='center' width='99%' cellpadding='0' cellspacing='0'>";

body += " <tr>";

body += " <td style='" + font_cnChar + "'><a href='javascript:calendar.loadPreviousYear()' style='text-decoration:none; color:" + fore_dayMouseOver + "'><font face='webdings'>3</font></a>年<a href='javascript:calendar.loadNextYear()' style='text-decoration:none; color:" + fore_dayMouseOver + "'><font face='webdings'>4</font></a></td>";

body += " <td align='center' nowrap='nowrap' style='color:" + fore_currentMonth + ";" + font_cnChar + "'><b>"+ y + "年" + m + "月</b></td>";

body += " <td align='right' style='" + font_cnChar + "'><a href='javascript:calendar.loadPreviousMonth()' style='text-decoration:none; color:" + fore_dayMouseOver + "'><font face='webdings'>3</font></a>月<a href='javascript:calendar.loadNextMonth()' style='text-decoration:none; color:" + fore_dayMouseOver + "'><font face='webdings'>4</font></a></td>";

body += " </tr>";

body += " </table>";

body += " </td>";

body += " </tr>";

body += " <tr>";

body += " <td>";

//Calendar Table Header

body += "<table align='center' width='99%' cellpadding='3' cellspacing='0' border='1' bordercolor='" + border_inner + "' style='border-collapse:collapse; table-layout:fixed;'>";

body += " <tr align='center' style='background:" + back_weekName + "'>";

body += " <td style='" + font_cnChar + style_cell + "'>日</td>";

body += " <td style='" + font_cnChar + style_cell + "'>一</td>";

body += " <td style='" + font_cnChar + style_cell + "'>二</td>";

body += " <td style='" + font_cnChar + style_cell + "'>三</td>";

body += " <td style='" + font_cnChar + style_cell + "'>四</td>";

body += " <td style='" + font_cnChar + style_cell + "'>五</td>";

body += " <td style='" + font_cnChar + style_cell + "'>六</td>";

body += " </tr>";

//Insert Null Days Before The First Day In Current Month

if (j != 0)

{

body += "<tr align='center'>";

body += ("<td style='background:" + back_nullDay + style_cell + "' colspan='" + j + "'></td>");

}

//Loop Each Days In Current Month

for (i=1; i<=k; i++)

{

//Row Begin

if ((i+j) % 7 == 1)

{

body += "<tr align='center'>";

}

//Cells Day By Day

body += "<td";

body += " onmouseover=""this.style.backgroundColor='" + back_dayMouseOver + "'; this.style.color='" + fore_dayMouseOver + "'""";

body += " onmouseout=""this.style.backgroundColor=''; this.style.color=''""";

body += " onclick=""calendar.setValue('" + y + "-" + m + "-" + i + "')""";

if (y == today.getFullYear() && m == today.getMonth()+1 && i == today.getDate())

{

body += "cursor:hand; " + today_decoration + "; " + font_numChar + style_cell + """";

}

else

{

body += " style='cursor:hand; " + font_numChar + style_cell + "'";

}

body += ">" + i + "</td>";

//Row End

if ((i+j) % 7 == 0)

{

body += ("</tr>");

}

}

//Append Null Days After The Last Day In Current Month

if ((i+j) % 7 != 0)

{

body += ("<td style='background:" + back_nullDay + style_cell + "' colspan='" + (8 - (i+j)%7) + "'></td>");

body += ("</tr>");

}

if (j < (36-k))

{

body += ("<tr><td colspan='7' style='background:" + back_nullDay + style_cell + "'> </td></tr>");

}

if (j == 0 && k == 28)

{

body += ("<tr><td colspan='7' style='background:" + back_nullDay + style_cell + "'> </td></tr>");

}

//End Calendar Table

body += "</table>";

//End Frame Table

body += "</td></tr></table>";

//Return

return body;

}

//Load Previous Year

this.loadPreviousYear = function()

{

y--;

__cnVeryCalendarContainer.innerHTML = this.generateCalendarTable();

}

this.loadNextYear = function()

{

y++;

__cnVeryCalendarContainer.innerHTML = this.generateCalendarTable();

}

this.loadPreviousMonth = function()

{

m--;

if (m < 1)

{

m = 12;

y--;

}

__cnVeryCalendarContainer.innerHTML = this.generateCalendarTable();

}

this.loadNextMonth = function()

{

m++;

if (m > 12)

{

m = 1;

y++;

}

__cnVeryCalendarContainer.innerHTML = this.generateCalendarTable();

}

//Get Position

this.getAbsolutePosition = function(element)

{

var point = { x: element.offsetLeft, y: element.offsetTop };

//Recursion

if (element.offsetParent)

{

var parentPoint = this.getAbsolutePosition(element.offsetParent);

point.x += parentPoint.x;

point.y += parentPoint.y;

}

return point;

};

//Pop Layer

this.setHook = function(dateField)

{

if (__cnVeryCalendarContainer.style.display != 'none' && reciever.id == dateField.id)

{

__cnVeryCalendarContainer.style.display = 'none';

return;

}

reciever = dateField;

//-- 如果不想在第二次打开日历时回归为当前月，则把下面两行注释掉或删掉 --

y = today.getFullYear();

m = today.getMonth() + 1;

//----------------------------

var point = this.getAbsolutePosition(dateField);

__cnVeryCalendarContainer.style.left = (point.x + dateField.offsetWidth + 5) + 'px';

__cnVeryCalendarContainer.style.top = point.y + 'px';

__cnVeryCalendarContainer.innerHTML = this.generateCalendarTable();

__cnVeryCalendarContainer.style.display = '';

}

//Hide Layer

this.fadeOut = function()

{

__cnVeryCalendarContainer.style.display = 'none';

}

//Click a Day Cell To Add The Value

this.setValue = function(date)

{

reciever.value = date;

this.fadeOut();

}

}

//Render Instance

document.write("<div id='__cnVeryCalendarContainer' style='width:200px; height:190px; position:absolute; float:left; display:none; z-index:999'></div>");

var calendar = new cnVeryCalendar();

2、控件绑定

<input type="text" runat="server" id="txt_endDate" onfocus="calendar.setHook(this)" />

或则

this.tb_enddate.Attributes.Add("onfocus", "calendar.setHook(this)");