用javascript制作一个日历，选择日期后怎样使他在jsp页面中显示出来

来源：网络整理时间:2016/6/26 23:59:23 关键词:

关于网友提出的“ 用javascript制作一个日历，选择日期后怎样使他在jsp页面中显示出来”问题疑问，本网通过在网上对“ 用javascript制作一个日历，选择日期后怎样使他在jsp页面中显示出来”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：

问题： 用javascript制作一个日历，选择日期后怎样使他在jsp页面中显示出来
描述:

js页面
function PopupCalendar(InstanceName)
{
///Global Tag
this.instanceName=InstanceName;
///Properties
this.separator="-"
this.oBtnTodayTitle="Today"
this.oBtnCancelTitle="Cancel"
this.oBtnClearTitle="清除"
this.weekDaySting=new Array("S","M","T","W","T","F","S");
this.m /> this.Width=200;
this.currDate=new Date();
this.today=new Date();
this.startYear=1940;
this.endYear=2020;
///Css
this.normalf /> this.selectedf /> this.divBorderCss="1px solid #BCD0DE";
this.titleTableBgColor="#98B8CD";
this.tableBorderColor="#CCCCCC"
///Method
this.Init=CalendarInit;
this.Fill=CalendarFill;
this.Refresh=CalendarRefresh;
this.Restore=CalendarRestore;
///HTMLObject
this.oTaget=null;
this.oPreviousCell=null;
this.sDIVID=InstanceName+"_Div";
this.sTABLEID=InstanceName+"_Table";
this.sM /> this.sYEARID=InstanceName+"_Year";
this.sTODAYBTNID=InstanceName+"_TODAYBTN";
}
function CalendarInit() ///Create panel
{
var sMonth,sYear
sM /> sYear=this.currDate.getYear();
htmlAll="";
htmlAll+="";
/// Month
htmloM /> for(i=0;i<12;i++)
{
htmloMonth+=""+this.monthSting[i]+"";
}
htmloMonth+="";
/// Year
htmloYear=" for(i=this.startYear;i<=this.endYear;i++)
{
htmloYear+=""+i+"";
}
htmloYear+="

";
/// Day
htmloDayTable="";
htmloDayTable+="";
for(i=0;i<=6;i++)
{
if(i==0)
htmloDayTable+="";
else
htmloDayTable+="";
for(j=0;j<7;j++)
{
if(i==0)
{
htmloDayTable+="";
htmloDayTable+=this.weekDaySting[j]+""
}
else
{
htmloDayTable+="<>
htmloDayTable+=" /> htmloDayTable+=" /> htmloDayTable+=" /> htmloDayTable+=" "
}
}
htmloDayTable+="";
}
htmloDayTable+="";
/// Today Button
htmloButton=""
htmloButton+="<>
htmloButton+=" /button> "
htmloButton+="<>
htmloButton+=" /button> "
htmloButton+="<>
htmloButton+=" /button> "
htmloButton+="

"
htmlend=""
/// All
htmlAll=htmlAll+htmloMonth+htmloYear+htmloDayTable+htmloButton+htmlend+"

";
document.write(htmlAll);
this.Fill();
}
function CalendarFill() ///
{
var sMonth,sYear,sWeekDay,sToday,oTable,currRow,MaxDay,iDaySn,sIndex,rowIndex,cellIndex,oSelectMonth,oSelectYear
sM /> sYear=this.currDate.getYear();
sWeekDay=(new Date(sYear,sMonth,1)).getDay();
sToday=this.currDate.getDate();
iDaySn=1
oTable=document.all[this.sTABLEID];
currRow=oTable.rows[1];
MaxDay=CalendarGetMaxDay(sYear,sMonth);
oSelectM /> oSelectMonth.selectedIndex=sMonth;
oSelectYear=document.all[this.sYEARID]
for(i=0;i<>
{
if(parseInt(oSelectYear.options[i].value)==sYear)oSelectYear.selectedIndex=i;
}
////
for(rowIndex=1;rowIndex<=6;rowIndex++)
{
if(iDaySn>MaxDay)break;
currRow = oTable.rows[rowIndex];
cellIndex = 0;
if(rowIndex==1)cellIndex = sWeekDay;
for(;cellIndex<>
{
if(iDaySn==sToday)
{
currRow.cells[cellIndex].innerHTML=""+iDaySn+"";
this.oPreviousCell=currRow.cells[cellIndex];
}
else
{
currRow.cells[cellIndex].innerHTML=iDaySn;
currRow.cells[cellIndex].style.color=this.normalfontColor;
}
CalendarCellSetCss(0,currRow.cells[cellIndex]);
iDaySn++;
if(iDaySn>MaxDay)break;
}
}
}
function CalendarRestore() /// Clear Data
{
var i,j,oTable
oTable=document.all[this.sTABLEID]
for(i=1;i<>
{
for(j=0;j<>
{
CalendarCellSetCss(0,oTable.rows[i].cells[j]);
oTable.rows[i].cells[j].innerHTML=" ";
}
}
}
function CalendarRefresh(newDate) ///
{
this.currDate=newDate;
this.Restore();
this.Fill();
}
function CalendarCellsMsOver(oInstance) /// Cell MouseOver
{
var myCell = event.srcElement;
CalendarCellSetCss(0,oInstance.oPreviousCell);
if(myCell)
{
CalendarCellSetCss(1,myCell);
oInstance.oPreviousCell=myCell;
}
}
function CalendarCellsMsOut(oInstance) ////// Cell MouseOut
{
var myCell = event.srcElement;
CalendarCellSetCss(0,myCell);
}
function CalendarYearChange(oInstance) /// Year Change
{
var sDay,sMonth,sYear,newDate
sDay=oInstance.currDate.getDate();
sM /> sYear=document.all[oInstance.sYEARID].value
newDate=new Date(sYear,sMonth,sDay);
oInstance.Refresh(newDate);
}
function CalendarMonthChange(oInstance) /// Month Change
{
var sDay,sMonth,sYear,newDate
sDay=oInstance.currDate.getDate();
sM /> sYear=oInstance.currDate.getYear();
newDate=new Date(sYear,sMonth,sDay);
oInstance.Refresh(newDate);
}
function CalendarCellsClick(oCell,oInstance)
{
var sDay,sMonth,sYear,newDate
sYear=oInstance.currDate.getFullYear();
sM /> sDay=oInstance.currDate.getDate();
if(oCell.innerText!=" ")
{
sDay=parseInt(oCell.innerText);
if(sDay!=oInstance.currDate.getDate())
{
newDate=new Date(sYear,sMonth,sDay);
oInstance.Refresh(newDate);
}
}
sDateString=sYear+oInstance.separator+CalendarDblNum(sMonth+1)+oInstance.separator+CalendarDblNum(sDay); ///return sDateString
if(oInstance.oTaget.tagName.toLowerCase()=="input")oInstance.oTaget.value = sDateString;
CalendarCancel(oInstance);
return sDateString;
}
function CalendarTodayClick(oInstance) /// "Today" button Change
{
oInstance.Refresh(new Date());
}
function getDateString(oInputSrc,oInstance)
{
if(oInputSrc&&oInstance)
{
var CalendarDiv=document.all[oInstance.sDIVID];
oInstance.oTaget=oInputSrc;
CalendarDiv.style.pixelLeft=CalendargetPos(oInputSrc,"Left");
CalendarDiv.style.pixelTop=CalendargetPos(oInputSrc,"Top") + oInputSrc.offsetHeight;
CalendarDiv.style.display=(CalendarDiv.style.display=="none")?"":"none";
}
}
function CalendarCellSetCss(sMode,oCell) /// Set Cell Css
{
// sMode
// 0: OnMouserOut 1: OnMouseOver
if(sMode)
{
oCell.style.border="1px solid #5589AA";
oCell.style.backgroundColor="#BCD0DE";
}
else
{
oCell.style.border="1px solid #FFFFFF";
oCell.style.backgroundColor="#FFFFFF";
}
}
function CalendarGetMaxDay(nowYear,nowMonth) /// Get MaxDay of current month
{
var nextMonth,nextYear,currDate,nextDate,theMaxDay
nextM /> if(nextMonth>11)
{
nextYear=nowYear+1;
nextM /> }
else
{
nextYear=nowYear;
}
currDate=new Date(nowYear,nowMonth,1);
nextDate=new Date(nextYear,nextMonth,1);
theMaxDay=(nextDate-currDate)/(24*60*60*1000);
return theMaxDay;
}
function CalendargetPos(el,ePro) /// Get Absolute Position
{
var ePos=0;
while(el!=null)
{
ePos+=el["offset"+ePro];
el=el.offsetParent;
}
return ePos;
}
function CalendarDblNum(num)
{
if(num < 10)
return "0"+num;
else
return num;
}
function CalendarCancel(oInstance) ///Cancel
{
var CalendarDiv=document.all[oInstance.sDIVID];
CalendarDiv.style.display="none";
}
function CalendarClear(oInstance){//Clear
oInstance.oTaget.value = "";
var CalendarDiv=document.all[oInstance.sDIVID];
CalendarDiv.style.display="none";
}
jsp页面

var oCalendarChs=new PopupCalendar("oCalendarChs");
oCalendarChs.weekDaySting=new Array("日","一","二","三","四","五","六");
oCalendarChs.m /> oCalendarChs.oBtnTodayTitle="今天";
oCalendarChs.oBtnCancelTitle="取消";
oCalendarChs.Init();

点击文本框日期就会显示出来:

以上介绍了“ 用javascript制作一个日历，选择日期后怎样使他在jsp页面中显示出来”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：http://www.codes51.com/itwd/2093786.html

用javascript制作一个日历，选择日期后怎样使他在jsp页面中显示出来

相关图片

相关文章