JavaScript实现JSP日历
来源：互联网 发布：主流编程语言排行 编辑：程序博客网 时间：2024/05/16 14:43
最近做了一个会议室使用情况查询，为了给客户最直观的现实，选择使用日历的形式，每个日期是个链接，将该天日期传给后台查询处该天各会议室的全部使用情况，使用情况适用甘特图展示。日历代码如下。
<%@ page contentType="text/html;charset=utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="pagination" uri="/WEB-INF/pagination.tld"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%
String path = request.getContextPath();
%>
<html>
<head>
<title>会场使用情况查询</title>
<link href="<%=path%>/css/index/kevin_css.css" rel="stylesheet"
type="text/css" />
<link href="<%=path%>/css/index/div_css.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="<%=path%>/js/datePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=path%>/js/cosc.js"></script>
<script type="text/javascript">
function windowInit(){
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
document.getElementById("year").value = year;
document.getElementById("month").value = month;
showCalender();
}
function showCalender(){
var year = document.getElementById("year").value;
var month = document.getElementById("month").value;
var url = "<%=request.getContextPath()%>/conference_room_usageGTT.action?usage_date=";
myCalender(year,month,"cla",url);
}
function myCalender(year,month,tbId,url){
var oTable = document.getElementById(tbId);//取得table
var oTBody = oTable.tBodies[1];
var row_length = oTBody.rows.length;
for(var rows = 0 ; rows < row_length; rows ++){
oTBody.deleteRow(0);
}
var crrentDay = new Date();
crrentDay.setYear(year);
crrentDay.setMonth(month);
var maxIndex = new Date(crrentDay.getFullYear(),crrentDay.getMonth(),0).getDate();
var firstIndex = new Date(crrentDay.getFullYear(),crrentDay.getMonth()-1,1).getDay();
var days = new Array(42);
for(var d = 0 ; d < maxIndex ; d ++){
days[firstIndex+d] = d+1;
}
for(var d = 0 ; d < 42 ; d ++){
if(days[d] == null || days[d] == ""){
days[d] = " ";
}
}
for(var j=0; j<6 ; j++) {
var newTr = document.createElement("TR");
for(var i=j*7 ; i< (j+1)*7 ;i++) {
var newTd = document.createElement("TD");
if(days[i] == " "){
newTd.innerHTML = days[i];
}else{
var v_date = year+"-"+month+"-"+days[i];
newTd.innerHTML = "<a href=/"javascript:openNewWindowSize('"+url+v_date+"',600,300);/"><font size=/"5/">"+days[i]+"</font></a>";
}
newTd.setAttribute("width","100px");
newTd.setAttribute("height","80px");
newTr.appendChild(newTd);
}
oTBody.appendChild(newTr);
}
}
</script>
</head>
<body onload="windowInit();">
<s:form name="usageList" action="" namespace="/"
theme="simple">
<table width="960" border="0" cellspacing="0" cellpadding="0"
style="margin: 0 auto; margin-top: 5px">
<tr>
<td valign="top" style="padding-right: 5px; padding-bottom: 10px">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
style="margin-top: 0px">
<tr>
<td height="28" class="black12_18"
style="padding-left: 17px; border: 1px solid #eaeaea; border-bottom: 0">
<strong>当前位置：</strong>
<a
href="javascript:window.location.href=">
首页</a> >
<a
href="javascript:window.location.href=">
会场管理</a> > 会场使用情况查询
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0"
style="border: 1px solid #e8e8e8; border-top: 0;">
<tr>
<td
style="background: url(<%=path%>/images/index/bg06.gif); height: 28px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="blue14_16b"
style="background: url(<%=path%>/images/index/bg07.gif) no-repeat left; height: 28px; padding-left: 17px">
使用情况
</td>
<td align="right" valign="bottom" style="padding: 6px 10px">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 15px; padding-top: 0">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
class="black12_18 tab_line" id="cla">
<tr>
<td colspan="7" align="center" height="50">
<select id="year" onchange="showCalender();">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select> 年
<select id="month" onchange="showCalender();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> 月
<!-- <input type="button" onclick="showCalender();" value="查 看" /> -->
<input type="button" onclick="history.go(-1);" value="返回按会议室查询页面" />
</td>
</tr>
<tr>
<th width="100px" height="60px">
<font color="red" size="5">日</font>
</th>
<th width="100px" height="60px">
<font size="size="5">一</font>
</th>
<th width="100px" height="60px">
<font size="size="5">二</font>
</th>
<th width="100px" height="60px">
<font size="size="5">三</font>
</th>
<th width="100px" height="60px">
<font size="size="5">四</font>
</th>
<th width="100px" height="60px">
<font size="size="5">五</font>
</th>
<th width="100px" height="60px">
<font color="red" size="5">六</font>
</th>
</tr>
<TBODY align="center">
</TBODY>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</s:form>
</body>
</html>
上面是个JSP页面，可以实现JSP的日历，比较简单。myCalender方法我写成通用的，别的模块也可以调用。
- JavaScript实现JSP日历
- jsp日历实现
- JavaScript实现日历控件
- javascript实现日历控件
- javascript日历实现
- javascript实现日历功能
- javascript实现的日历
- JavaScript实现简单日历
- javaScript实现日历控件
- javascript实现日历效果
- 用JSP实现弹出日历
- DIV+JavaScript实现日历控件
- 用JAVASCRIPT实现的日历
- Javascript实现的页面日历
- javascript脚本实现日历控件
- 用JAVASCRIPT实现的日历
- JavaScript实现简易日历效果
- 用JSP实现的日历程序
- CSS左侧导航效果的实现
- 开通博客纪念
- Test whether two objects hold the same data values or both are null
- 2010年终总结
- iphone development NSBundle pathForResource load images from subfolder problem
- JavaScript实现JSP日历
- 编译Boost库
- mysql 动态 SQL 语语
- windbg常用命令
- EJB工作原理
- [Linux][2010-12-31] Linux系统日志 /var/log/messages
- 消息队列MSMQ的使用实例
- java jdbctemple查询
- 关于app_offline.htm
