1.又玩日历（有图标的 附件：calendar.rar）
<script type="text/javascript" src="js/calendar.js"></script>
<tr valign="middle" height="35">
<td>日期：</td>
<td><input name="rq" id="rq" type="text" size="20" value="" readonly >
<img src="images/dot_date.gif" width="16"tabIndex="1" height="16" align="absmiddle" style="cursor:hand" onkeyup="newCalendar(),showCalendar(document.all.rq)" onClick="newCalendar(),showCalendar(document.all.rq)" >
</td>
</tr>
附：canlendar.js
<!-- 日历控件 -->
// 公共设置
//var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
document.onclick = function() {
if (event.srcElement.src != null &&
event.srcElement.src.indexOf("calendar.gif")) {
return;
}
if (!document.all.calendar.contains(event.srcElement) &&
document.all.cl.style.visibility == "visible") {
showHideLayers('cl','','hide');
}
}
var months = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
//var months = new Array("1","2","3","4","5","6","7","8","9","10","11","12");
var daysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
//var days = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var days = new Array("日","一","二","三","四","五","六");
var eventObj;
//判断是否闰年
function getDays(month, year) {
if (1 == month)
return ((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400) ? 29 : 28;
else
return daysInMonth[month];
}
//得到今天的年月日
function getToday() {
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}
today = new getToday();
//创建日历
function newCalendar() {
today = new getToday();
var parseYear = parseInt(document.all.year[document.all.year.selectedIndex].text);
var newCal = new Date(parseYear,document.all.month.selectedIndex,1);
var day = -1;
var startDay = newCal.getDay();
var daily = 0;
if ((today.year == newCal.getFullYear()) && (today.month == newCal.getMonth()))
day = today.day;
var tableCal = document.all.calendar.tBodies.dayList;
var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());
for (var intWeek = 0; intWeek < tableCal.rows.length;intWeek++) {
for (var intDay = 0;intDay < tableCal.rows[intWeek].cells.length;intDay++) {
var cell = tableCal.rows[intWeek].cells[intDay];
if ((intDay == startDay) && (0 == daily))
daily = 1;
if(day==daily)
cell.className = "today";
else if(intDay == 6)
cell.className = "sunday";
else if (intDay==0)
cell.className ="satday";
else
cell.className="normal";
if ((daily > 0) && (daily <= intDaysInMonth)) {
cell.innerText = daily;
daily++;
}
else
cell.innerText = "";
}
}
}
function findObj(n, d) {
var p,i,x;
if (!d) d = document;
if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
d = parent.frames[n.substring(p+1)].document;
n = n.substring(0,p);
}
if (!(x = d[n]) && d.all)
x = d.all[n];
for (i=0; !x&&i<d.forms.length; i++)
x = d.forms[i][n];
for (i=0; !x&&d.layers && i<d.layers.length; i++)
x = findObj(n,d.layers[i].document);
if (!x && document.getElementById)
x = document.getElementById(n);
return x;
}
function showSelectsInRect(pLeft, pTop, pRight, pBottom, pVisibility) {
var vAnElement = null;
for (var i = 0; i < document.all.length; i++){
var vAnElement = document.all[i];
if (vAnElement.type == "select-one" && vAnElement.id != "month" && vAnElement.id != "year") {
var vParentElement = vAnElement.offsetParent;
var vLeft = vParentElement.offsetLeft;
var vTop = vParentElement.offsetTop;
while (vParentElement.tagName != "BODY") {
vParentElement = vParentElement.offsetParent;
vLeft += vParentElement.offsetLeft;
vTop += vParentElement.offsetTop;
}
var vRight = vLeft + vAnElement.offsetWidth;
var vBottom = vTop + vAnElement.offsetHeight;
if (pTop < vTop && vBottom < pBottom) {
if (vLeft > pRight || vRight < pLeft) {
continue;
}
else {
vAnElement.style.visibility = pVisibility;
}
}
}
}
}
function showHideLayers() {
var i,p,v,obj,args = showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) {
if ((obj = findObj(args[i])) != null) {
v = args[i+2];
if (obj.style) {
obj = obj.style;
v = (v == 'show') ? 'visible' : (v = 'hide') ? 'hidden' : v;
}
obj.visibility=v;
}
}
if (v == "hidden") {
showSelectsInRect(document.all.cl.style.pixelLeft,
document.all.cl.style.pixelTop,
document.all.cl.style.pixelLeft + document.all.calendar.offsetWidth,
document.all.cl.style.pixelTop + document.all.calendar.offsetHeight,
"visible");
}
else {
showSelectsInRect(document.all.cl.style.pixelLeft,
document.all.cl.style.pixelTop,
document.all.cl.style.pixelLeft + document.all.calendar.offsetWidth,
document.all.cl.style.pixelTop + document.all.calendar.offsetHeight,
"hidden");
if (document.all.month.value == "") {
document.all.month.selectedIndex = 0;
}
if (document.all.year.value == "") {
document.all.year.selectedIndex = 0;
}
}
}
function hideElement(elmID){
for (i=0; i<document.all.tags(elmID).length; i++){
obj = document.all.tags(elmID)[i];
obj.style.visibility = "hidden";
}
}
function showElement(elmID){
for (i=0; i <document.all.tags(elmID).length; i++){
obj = document.all.tags(elmID)[i];
obj.style.visibility = "";
}
}
//获取日期
function getDate() {
var sDate;
var d = new Date();
if ("TD" == event.srcElement.tagName) {
if ("" != event.srcElement.innerText) {
//sDate = document.all.year.value + "-" + document.all.month.value + "-" + event.srcElement.innerText;
sDate = document.all.year.value + "-" + formatDate(document.all.month.value) + "-" + formatDate(event.srcElement.innerText);
// sDate = document.all.year.value + " 年 " + document.all.month.value + " 月 " + event.srcElement.innerText + " 日";
//alert(sDate);
if (eventObj.size < 10) {
eventObj.value = sDate.substring(0, eventObj.size);
}
else {
eventObj.value = sDate;
}
showHideLayers('cl','','hide');
//showElement("SELECT");
}
}
}
//显示日历
function showCalendar(obj) {
if (document.all.cl.style.visibility == "hidden") {
eventObj = obj;
parentObj = obj.offsetParent;
offsetLeftVal = parentObj.offsetLeft;
offsetTopVal = parentObj.offsetTop;
while (parentObj.tagName != "BODY") {
parentObj = parentObj.offsetParent;
offsetLeftVal += parentObj.offsetLeft;
offsetTopVal += parentObj.offsetTop;
}
//document.all.cl.style.pixelLeft = event.clientX;
document.all.cl.style.pixelLeft = offsetLeftVal + eventObj.offsetLeft;
//document.all.cl.style.pixelTop = event.clientY;
document.all.cl.style.pixelTop = offsetTopVal + eventObj.offsetTop + eventObj.offsetHeight;
showHideLayers('cl','','show');
//hideElement("SELECT");
}
else {
showHideLayers('cl','','hide');
}
}
function formatDate(dateValue) {
if (dateValue < 10) {
return "0" + dateValue;
}
else {
return dateValue;
}
}
// 以下具体构造菜单
document.write('<div id="cl" style="position:absolute; width:160px; height:160px; z-index:100; visibility: hidden"><table border="1" cellspacing="0" bgcolor=/"#EDF3FF/" cellpadding="0" class="thinborder" style=/"z-index:3;FONT-SIZE: 12px;border:1px solid #d0d0d0;border-collapse: collapse;border-style: solid;border-width: 1px; /"><tr><td><table id="calendar" border="0" cellspacing="0" cellpadding="3" bordercolor=/"silver/" class="" width="150"><tr><td colspan="7" align="center"><select id="month" onChange="newCalendar()">');
for (var intLoop=0; intLoop<months.length; intLoop++) {
document.write("<option value= " + (intLoop + 1) + " " + (today.month == intLoop ? "selected" : "") + ">" + months[intLoop]);
}
document.write('</select><select id="year" onChange="newCalendar()">');
for (var intLoop=today.year-80; intLoop<(today.year+50); intLoop++) {
document.write("<option value= " + intLoop + " " + (today.year == intLoop ? "selected" : "") + ">" + intLoop);
}
document.write("</select></td></tr><tr bgcolor=/"#99B2D3/">");
document.write("<td class='satday'><font size='2' color=/"red/">" + days[0] + "</font></td>");
for (var intLoop=1; intLoop<days.length-1; intLoop++)
document.write("<td class='normal'><font size='2'>" + days[intLoop] + "</font></td>");
document.write("<td class='sunday'><font size='2' color=/"red/">" + days[intLoop] + "</font></td>");
document.write('</tr><tbody border="0" cellspacing="0" cellpadding="0" id="dayList" align="center" onClick="getDate()">');
for (var intWeeks=0; intWeeks<6; intWeeks++) {
document.write("<tr style='cursor:hand' >");
for (var intDays=0; intDays<days.length; intDays++)
document.write("<td onMouseOver='this.bgColor=/"#99B2D3/"' onMouseOut='this.bgColor=/"/"'></td>");
document.write("</tr>");
}
document.write('</tbody></table></td></tr></table></div>');
//Write by DongLiang 2000
//构造一个从1980年到2030年的日历表，自动控制日期。
//doc为构造者的document对象，
//xxx为日历表对象的名称后缀，最后生成的日历表通过yearxxx,monthxxx,datexxx访问。
//first为起始年份，一般建议为1980年，请不要早于1601年 
//last为结束年份，一般建议为2030年，请不要晚于2399年
//date为初始化设置的时间。
function writeCalendar(doc,xxx,first,last,date,readonly) {
var i;
var ro;
if( readonly != null )
ro = true;
else
ro = false;
doc.write('<select ', (ro?'disabled':'') ,' id="year', xxx, '" name="year', xxx, '" style="width:60" onChange="javascript:updateOptions(/'', xxx, '/');">');
for( i=first; i<=last; i++ )
doc.write('<option value="',i,'"', (i==((date.getYear()<100)?(date.getYear()+1900):date.getYear()))?" SELECTED":"" ,'>',i,'</option>');
doc.write('</select>年');
doc.write('<select ', (ro?'disabled':'') ,' id="month',xxx,'" name="month',xxx,'" style="width:40" onChange="javascript:updateOptions(/'', xxx,'/');">');
for( i=1; i<=12; i++ )
doc.write('<option value="',i,'"', (i==date.getMonth()+1)?" SELECTED":"", '>',i,'</option>');
doc.write('</select>月');
doc.write('<select ', (ro?'disabled':'') ,' id="date',xxx,'" name="date',xxx,'" style="width:45"">');
for( i=1; i<=31; i++ )
doc.write('<option value="',i,'"', (i==date.getDate())?" SELECTED":"", '>',i,'</option>');
doc.write('</select>日');
if( ro ) {
doc.write('<input type="hidden" name="year', xxx, '" value="', (date.getYear()<100)?(date.getYear()+1900):date.getYear(), '">');
doc.write('<input type="hidden" name="month', xxx, '" value="', (date.getMonth()+1), '">');
doc.write('<input type="hidden" name="date', xxx, '" value="', date.getDate(), '">');
}
}
function writeCalendar1(doc,xxx1,first1,last1,date1,xxx2,first2,last2,date2,ro) {
var i;
if(ro){
doc.write('<select ','id="year', xxx1, '" name="year', xxx1, '" style="width:60" onChange="javascript:updateOptions1(/'', xxx1,'/',/'',xxx2,'/');">');
for( i=first1; i<=last1; i++ )
doc.write('<option value="',i,'"', (i==((date1.getYear()<100)?(date1.getYear()+1900):date1.getYear()))?" SELECTED":"" ,'>',i,'</option>');
doc.write('</select>年');
doc.write('<select ', 'disabled' ,' id="month',xxx1,'" name="month',xxx1,'" style="width:40" >');
for( i=1; i<=12; i++ )
doc.write('<option value="',i,'"', (i==date1.getMonth()+1)?" SELECTED":"", '>',i,'</option>');
doc.write('</select>月');
doc.write('<select ', 'disabled',' id="date',xxx1,'" name="date',xxx1,'" style="width:45"">');
doc.write('<option value="">','','</option>');
for( i=1; i<=31; i++ )
doc.write('<option value="',i,'"', (i==date1.getDate())?" SELECTED":"", '>',i,'</option>');
doc.write('</select>日');
doc.write(' - ');
doc.write('<select ','disabled',' id="year', xxx2, '" name="year', xxx2, '" style="width:60">');
for( i=first2; i<=last2; i++ )
doc.write('<option value="',i,'"', (i==((date2.getYear()<100)?(date2.getYear()+1900):date2.getYear()))?" SELECTED":"" ,'>',i,'</option>');
doc.write('</select>年');
doc.write('<select ','id="month',xxx2,'" name="month',xxx2,'" style="width:40" onChange="javascript:updateOptions(/'', xxx2,'/');">');
for( i=1; i<=12; i++ )
doc.write('<option value="',i,'"', (i==date2.getMonth()+1)?" SELECTED":"", '>',i,'</option>');
doc.write('</select>月');
doc.write('<select ','id="date',xxx2,'" name="date',xxx2,'" style="width:45"">');
for( i=1; i<=31; i++ )
doc.write('<option value="',i,'"', (i==date2.getDate())?" SELECTED":"", '>',i,'</option>');
doc.write('</select>日');
} else {
doc.write('<select ','id="year', xxx1, '" name="year', xxx1, '" style="width:60" onChange="javascript:updateOptions(/'', xxx1, '/');">');
for( i=first1; i<=last1; i++ )
doc.write('<option value="',i,'"', (i==((date1.getYear()<100)?(date1.getYear()+1900):date1.getYear()))?" SELECTED":"" ,'>',i,'</option>');
doc.write('</select>年');
doc.write('<select ','id="month',xxx1,'" name="month',xxx1,'" style="width:40" onChange="javascript:updateOptions(/'', xxx1,'/');">');
for( i=1; i<=12; i++ )
doc.write('<option value="',i,'"', (i==date1.getMonth()+1)?" SELECTED":"", '>',i,'</option>');
doc.write('</select>月');
doc.write('<select ','id="date',xxx1,'" name="date',xxx1,'" style="width:45"">');
doc.write('<option value="">','','</option>');
for( i=1; i<=31; i++ )
doc.write('<option value="',i,'"', (i==date1.getDate())?" SELECTED":"", '>',i,'</option>');
doc.write('</select>日');
doc.write(' - ');
doc.write('<select ','id="year', xxx2, '" name="year', xxx2, '" style="width:60" onChange="javascript:updateOptions(/'', xxx2, '/');">');
for( i=first2; i<=last2; i++ )
doc.write('<option value="',i,'"', (i==((date2.getYear()<100)?(date2.getYear()+1900):date2.getYear()))?" SELECTED":"" ,'>',i,'</option>');
doc.write('</select>年');
doc.write('<select ','id="month',xxx2,'" name="month',xxx2,'" style="width:40" onChange="javascript:updateOptions(/'', xxx2,'/');">');
for( i=1; i<=12; i++ )
doc.write('<option value="',i,'"', (i==date2.getMonth()+1)?" SELECTED":"", '>',i,'</option>');
doc.write('</select>月');
doc.write('<select ','id="date',xxx2,'" name="date',xxx2,'" style="width:45"">');
for( i=1; i<=31; i++ )
doc.write('<option value="',i,'"', (i==date2.getDate())?" SELECTED":"", '>',i,'</option>');
doc.write('</select>日');
}
}
//此函数由writeCalendar构造的日历表调用，程序员不应当直接调用。
function updateOptions(xxx) {
var yearxxx = eval("document.all.year"+xxx+".options");
var monthxxx = eval("document.all.month"+xxx+".options");
var datexxx = eval("document.all.date"+xxx+".options");
var i, x,y;
y = eval("document.all.date"+xxx+".selectedIndex");
for( i=datexxx.length; i>=0; i-- )
datexxx[i] = null;
if( monthxxx.value==2 ) {
if( yearxxx.value%4 )
x=28;
else
x=29;
}
else {
if( monthxxx.value==4 || monthxxx.value==6 || monthxxx.value==9 || monthxxx.value==11 )
x=30;
else
x=31;
}
for( i=1; i<=x; i++ )
datexxx[i-1] = new Option(i,i,false,false);
if((y+1)>x)
datexxx[x-1].selected = true;
else datexxx[y].selected = true;
}
function updateOptions1(xxx1,xxx2) {
var yearxxx1 = eval("document.all.year"+xxx1+".options");
var yearxxx2 = eval("document.all.year"+xxx2+".options");
var i,y;
y = eval("document.all.year"+xxx1+".selectedIndex");
yearxxx2[y].selected = true;
}
function daysInMonth(theMon,theYear){
var daysArray=new Array(31,29,31,30,31,30,31,31,30,31,30,31);
if(theMon!=2)
return daysArray[theMon-1];
if((theYear % 4!=0)||(theYear % 100==0&&theYear % 400!=0))
return 28;
return 29;
}
function checkDate(theForm,sYear,sMonth,sDay){
var curYear=theForm.elements[sYear].value;
var curMon=theForm.elements[sMonth].value;
var curday=theForm.elements[sDay].value;
var maxDay=daysInMonth(curMon,curYear);
if(maxDay<curday){
alert("没有你输入的日期:"+curYear+"年"+curMon+"月"+curday+"日!请再输入!");
theForm.elements[sDay].focus();
}
}
function checkOneNumber(value){
var i=0;
for(i=0;i<10;i++)
if(value==i)
return true;
if(i>=10)
return false;
}
function checkNumber(value){
var len=value.value.length;
var i=0;
for(i=0;i<len;i++){
if(checkOneNumber(value.value.charAt(i)))continue;
else{
alert("请输入数字!");
value.focus();
return false;
}
}
return true;
}
function isNumber(anum1){
var numstr = "0123456789";
for(var i=0; i < anum1.length; i++){
if(numstr.indexOf(anum1.charAt(i)) == -1)
{
return false;
}
}
return true;
}
function checkYear(value){
if(value.value.length!=0&&value.value.length!=4){
alert("没有您输入的年:"+value.value+"!请正确输入年!");
value.focus();
return false;
}
day = new Date();
if(value.value.length!=0&&(value.value<1901||value.value>day.getYear())){
alert("请输入有效的年份!");
value.focus();
return false;
}
return checkNumber(value);
}
function checkYear1(value){
if(value.value.length!=0&&value.value.length!=4){
alert("没有您输入的年:"+value.value+"!请正确输入年!");
value.focus();
return false;
}
day = new Date();
if(value.value.length!=0&&(value.value<1901||value.value>day.getYear()+10)){
alert("请输入有效的年份!");
value.focus();
return false;
}
return checkNumber(value);
}
function checkMonth(value){
if(value.value.length!=0&&value.value<1||value.value>12){
alert("没有您输入的月:"+value.value+"!请正确输入月!");
value.focus();
return false;
}
return checkNumber(value);
}
function checkEmail(value){
if(value.value.length!=0&&(value.value.indexOf('@',0)==-1||value.value.indexOf('.')==-1)){
alert("请正确输入电子邮件!");
value.focus();
return false;
}
return true;
}
function checkZipCode(value){
if(value.value.length!=0&&value.value.length!=6){
alert("请正确输入邮编!");
value.focus();
return false;
}
return checkNumber(value);
}
function generateDate(year,month,day){
var monthTemp=month;
if(monthTemp!=""&&monthTemp.length<2)
monthTemp="0"+monthTemp;
//if(monthTemp=="")monthTemp="01";
var dayTemp=day;
if(dayTemp!=""&&dayTemp.length<2)
dayTemp="0"+dayTemp;
//if(dayTemp=="")dayTemp="01";
return year+""+monthTemp+""+dayTemp;
}
function addOneYear(){
}
function isDouble(str) {
var rc=true;
oneDecimal=false;
if (str+"" == "undefined" || str == null){
rc=false;
} else{
for(di=0; di< str.length; di++){
ch=str.charAt(di);
if(ch=="." && !oneDecimal){
oneDecimal=true;
continue;
}
if ((ch< "0") || (ch >'9')){
rc=false;
break;
}
}
}
return rc;
}
function StringTrim(str) {
if (str == null) {
return null;
}
var length = str.length;
var begin;
var end;
var finish = false;
var pointer = 0;
var value;
while ((pointer < length) && (!finish)) {
value = str.charAt(pointer);
if ((value >= '/0') && (value <= ' ')) {
pointer++;
continue;
}
finish = true;
begin = pointer;
break;
}
if (!finish) {
return "";
}
pointer = length - 1;
finish = false;
while ((pointer >= 0) && (! finish)) {
value = str.charAt(pointer);
if ((value >= '/0') && (value <= ' ')) {
pointer--;
continue;
}
finish = true;
end = pointer;
break;
}
if (! finish) {
return "";
}
return str.substring(begin,end+1);
}
function ValueIsEmpty(value)
{
if (value == null)
{
return true;
}
value = StringTrim(value);
if (value == "")
{
return true;
}
return false;
}
function isTelephone(str) {
var rightChar = "0123456789-*();,";
if (str+"" == "undefined" || str == null){
return false;
}
for(var i=0; i < str.length; i++) {
if(rightChar.indexOf(str.charAt(i)) == -1)
{
return false;
}
}
if (str.length < 7) {
return false;
}
return true;
}
1.1以前的玩法
<input name="" type="text" onClick="loadCalendar(this)"/>
<script lanaguage="javascript">
function loadCalendar(field){
var rtn=window.showModalDialog("calendar.jsp","","dialog Width:290px;dialogHight:250px;status:no;help:no:scrolling=no");
if(rtn!=null){
field.value=rtn;
return;
}
}
</script>
calendar.jsp源文件见《JSP程序开发范例宝典》050