前端:jquery,jsp,html,日历插件:my97 后端 java springmvc
该实现方式代码写的很low,欢迎提出意见改正!
实现效果:
(1)按周查询,选择日期只能从周一开始。 这是日历控件my97控制实现的,可到其官网查询使用文档
(2)按月查询,只看到月份
(3)按周查询效果图:横坐标是第几周
(4)按月查询结果图:横坐标是几月
1、引入echarts.js或者echarts.min.js
2、html代码:采用表单提交
<html>
<head>
<title>绩效管理</title>
<meta name="decorator" content="default"/>
<script type="text/javascript" src="${ctxStatic}/echarts/echarts.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/bespeakweb/bespeakPerformanceweb/list">绩效管理</a></li>
</ul>
<form:form id="searchForm" modelAttribute="performance" action="${ctx}/bespeakweb/bespeakPerformanceweb/list"
method="post" class="breadcrumb form-search">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<ul class="ul-form">
<li><label>开始日期:</label>
<input name="startDate" type="text" id="BeginTime" readonly="readonly" maxlength="20" class="input-medium Wdate"
value="${performance.startDate}"
onclick="WdatePicker({disabledDays:[2,3,4,5,6,0],dateFmt:'yyyy-MM-dd',isShowClear:true,maxDate:'#F{$dp.$D(\'EndTime\')||\'%y-%M-%d/\'}'});"/>
</li>
<li><label>结束日期:</label>
<input name="endDate" type="text" id="EndTime" readonly="readonly" maxlength="20" class="input-medium Wdate"
value="${performance.endDate}"
onclick="WdatePicker({disabledDays:[2,3,4,5,6,0],dateFmt:'yyyy-MM-dd',isShowClear:true,minDate:'#F{$dp.$D(\'BeginTime\')}',maxDate:'%y-%M-%d'});"/>
</li>
<li style="padding-left: 18px"><label>查询方式:</label>
<select name="unit" id="selectdep" style="width: 92px;" onchange="editDate()">
<option value="0" <c:if test="${performance.unit=='0'}">selected</c:if>>按周</option>
<option value="1" <c:if test="${performance.unit=='1'}">selected</c:if>>按月</option>
</select>
<