JavaScript实现JSP日历

最新推荐文章于 2023-03-08 11:16:12 发布

原创

最新推荐文章于 2023-03-08 11:16:12 发布 · 9.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jsp #border #stylesheet #date #path

本文展示了如何在JSP中实现一个简单的日历功能。通过JavaScript编写了一个名为`myCalender`的通用方法，该方法创建了一个日历表格，其中每个日期都是一个链接，点击后可以传递日期到后台进行查询。页面加载时自动填充当前日期，并提供年月选择，用户可以查看不同月份的日历。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做了一个会议室使用情况查询，为了给客户最直观的现实，选择使用日历的形式，每个日期是个链接，将该天日期传给后台查询处该天各会议室的全部使用情况，使用情况适用甘特图展示。日历代码如下。

<%@ 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);
       }